JQuery实现滚动广告（转）

 用JQuery实现简单的滚动广告:

       实现的思想是,定义一个div,div大小跟每张图片的大小一致。在div里面定义两个ul列表,一个用于显示图片,一个用于控制图片.定义div的 overflow值为hidden,使div内只能显示一张图片,然后利用JQuery的animate()实现整个ul的上下移动,使之显示指定的图片。

        HTML代码

        

按 Ctrl+C 复制代码

<div id="d1"> <ul id="adv"> <li><img src="images/1.jpg" alt="1" /> </li> <li><img src="images/2.jpg" alt="2" /> </li> <li><img src="images/3.jpg" alt="3" /> </li> <li><img src="images/4.jpg" alt="4" /> </li> <li><img src="images/5.jpg" alt="5" /> </li> </ul> <ul id="num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div>

按 Ctrl+C 复制代码

CSS代码

按 Ctrl+C 复制代码

* { margin: 0px; padding: 0px; } #d1 { border: 2px solid #E98C36; width: 548px; height: 177px; margin-left: 30%; margin-top: 10%; position: relative; overflow: hidden; } #adv, #num { position: absolute; } ul li { list-style: none; display: inline; } ul img { width: 548px; height: 177px; display: block; } #num { right: 5px; bottom: 5px; } #num li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; } .on { line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: red; font-weight: bold; }

按 Ctrl+C 复制代码

JS代码

 

按 Ctrl+C 复制代码

<script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript"> var i = 0; $(function() { //当鼠标移到所有的li下标时 $("#num li").mouseover(function() { //获得当前li的下标 var index=$("#num li").index(this); //调用showImage()完成图片的滚动 showImage(index); }).eq(0).mouseover(); //加载页面时触发 var taskId; $("#d1").hover(function(){ //当鼠标移到图片上时停止滚动 clearInterval(taskId); },function(){ //当鼠标移走时开始滚动 taskId=setInterval(function(){ showImage(i); i++; if(i==5) i=0; },2000); }).mouseleave(); }); //完成图片的滚动 function showImage(index) { i=index; //执行当前的动画,如果之前的动画还没有完成,则立即清除之前的动画 $("#adv").stop(true).animate({ top : -177 * index }, 1000) //当前的li下标,高度显亮;并且使之前显亮的下标恢复原来的颜色 $("#num li").eq(index).addClass("on").siblings().removeClass("on"); } </script>

按 Ctrl+C 复制代码