原理:使所有的图片隐藏然后控制对应的图片显示。
初始化:现将所有的图片隐藏控制第一张显示。(可通过css实现)。
过程:当鼠标经过数字的时候,先控制所有的图片全部隐藏,控制数字对应的图片显示即可。
<ul id="img">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
<ul id="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
$("#img li").css("display","none");//初始化隐藏全部的图片
$("#img li:eq(0)").css("display","block");//只显示第一个图片
$("#num li").mousemove(function(){//当鼠标经过数字
$("#img li").css("display","none");//隐藏全部的图片
$("#img li:eq("+$(this).index()+")").css("display","block");//数字对应的图片显示
});
</script>