【JAVASCRIPT】jquery实现聚焦图
HTML框架：
1 <div class="content_right"> 2 <div class="ad" > 3 <ul class="slider" > 4 <li><img src="images/ads/1.gif"/></li> 5 <li><img src="images/ads/2.gif"/></li> 6 <li><img src="images/ads/3.gif"/></li> 7 <li><img src="images/ads/4.gif"/></li> 8 <li><img src="images/ads/5.gif"/></li> 9 </ul> 10 <ul class="num" > 11 <li>1</li> 12 <li>2</li> 13 <li>3</li> 14 <li>4</li> 15 <li>5</li> 16 </ul> 17 </div> 18 </div>
CSS定义如下：
1 <style type="text/css"> 2 *{ margin:0; padding:0;} 3 .ad{ width:586px; height:150px; overflow:hidden; position:absolute;} 4 .content_right .slider,.content_right .num{ 5 position:absolute; 6 } 7 .content_right .slider li{ 8 list-style:none; 9 display:inline; 10 } 11 .content_right .slider img{ 12 width:586px; 13 height:150px; 14 display:block; 15 } 16 .content_right .num{ 17 right:5px; 18 bottom:5px; 19 } 20 .content_right .num li{ 21 float: left; 22 color: #FF7300; 23 text-align: center; 24 line-height: 16px; 25 width: 16px; 26 height: 16px; 27 font-family: Arial; 28 font-size: 12px; 29 cursor: pointer; 30 overflow: hidden; 31 margin: 3px 1px; 32 border: 1px solid #FF7300; 33 background-color: #fff; 34 } 35 </style>
需要注意的是.content_right .slider和.content_right .num的position属性必须设置为absolute，相对定位。不然写完js代码会发现图片怎么点都不会移动，刚开始还以为是js代码写错了，到最后检查css文件才发现css写错了。罪过，罪过！
js代码：
1 <script type="text/javascript"> 2 $(function () { 3 var index = 0; 4 var settime; 5 $(".num li").mouseover(function () { //为li添加鼠标事件，为了的到刚进入页面的index； 6 index = $(".num li").index(this); 7 showimg(index); 8 }).eq(0).mouseover(); //初始化 9 10 $(".ad").hover(function () { 11 clearInterval(settime); //当鼠标进入的时候停止， 12 }, function () { //鼠标离开的时候设置定时器。 13 settime = setInterval(function () { 14 showimg(index); 15 index++; 16 if (index == 5) { 17 index = 0; 18 } 19 }, 3000); 20 }).trigger("mouseleave"); 21 }) 22 function showimg(index) { 23 var height = $(".slider li:first").height(); 24 $(".slider").stop(true).animate({ top : -index * height }, 1000); 25 $(".num").find("li").siblings().css("background", "white").eq(index).css("background", "yellow"); //设置.num li的css属性 26 } 27 </script>
$(".num li").mouseover(fun()````).eq(0).mouseover();是为了初始页面.num li 中的现实效果，如果没有此项，刚进入页面第一幅图相对应的数字不会高亮显示。
