用JQuery实现简单的滚动广告:
实现的思想是,定义一个div,div大小跟每张图片的大小一致。在div里面定义两个ul列表,一个用于显示图片,一个用于控制图片.定义div的 overflow值为hidden,使div内只能显示一张图片,然后利用JQuery的animate()实现整个ul的上下移动,使之显示指定的图片。
HTML代码
1 <div id="d1"> 2 <ul id="adv"> 3 <li><img src="images/1.jpg" alt="1" /> 4 </li> 5 <li><img src="images/2.jpg" alt="2" /> 6 </li> 7 <li><img src="images/3.jpg" alt="3" /> 8 </li> 9 <li><img src="images/4.jpg" alt="4" /> 10 </li> 11 <li><img src="images/5.jpg" alt="5" /> 12 </li> 13 </ul> 14 <ul id="num"> 15 <li> 16 1 17 </li> 18 <li> 19 2 20 </li> 21 <li> 22 3 23 </li> 24 <li> 25 4 26 </li> 27 <li> 28 5 29 </li> 30 </ul> 31 </div>
CSS代码
1 * { 2 margin: 0px; 3 padding: 0px; 4 } 5 #d1 { 6 border: 2px solid #E98C36; 7 width: 548px; 8 height: 177px; 9 margin-left: 30%; 10 margin-top: 10%; 11 position: relative; 12 overflow: hidden; 13 } 14 #adv, #num { 15 position: absolute; 16 } 17 ul li { 18 list-style: none; 19 display: inline; 20 } 21 ul img { 22 width: 548px; 23 height: 177px; 24 display: block; 25 } 26 #num { 27 right: 5px; 28 bottom: 5px; 29 } 30 #num li { 31 float: left; 32 color: #FF7300; 33 text-align: center; 34 line-height: 16px; 35 width: 16px; 36 height: 16px; 37 font-family: Arial; 38 font-size: 12px; 39 cursor: pointer; 40 overflow: hidden; 41 margin: 3px 1px; 42 border: 1px solid #FF7300; 43 } 44 .on { 45 line-height: 21px; 46 width: 21px; 47 height: 21px; 48 font-size: 16px; 49 margin: 0 1px; 50 border: 0; 51 background-color: red; 52 font-weight: bold; 53 }
JS代码
1 <script type="text/javascript" src="js/jquery-1.7.1.js"></script> 2 <script type="text/javascript"> 3 var i = 0; 4 $(function() { 5 //当鼠标移到所有的li下标时 6 $("#num li").mouseover(function() { 7 //获得当前li的下标 8 var index=$("#num li").index(this); 9 //调用showImage()完成图片的滚动 10 showImage(index); 11 }).eq(0).mouseover(); 12 //加载页面时触发 13 14 var taskId; 15 $("#d1").hover(function(){ 16 //当鼠标移到图片上时停止滚动 17 clearInterval(taskId); 18 },function(){ 19 //当鼠标移走时开始滚动 20 taskId=setInterval(function(){ 21 showImage(i); 22 i++; 23 if(i==5) i=0; 24 },2000); 25 }).mouseleave(); 26 }); 27 //完成图片的滚动 28 function showImage(index) { 29 i=index; 30 //执行当前的动画,如果之前的动画还没有完成,则立即清除之前的动画 31 $("#adv").stop(true).animate({ 32 top : -177 * index 33 }, 1000) 34 //当前的li下标,高度显亮;并且使之前显亮的下标恢复原来的颜色 35 $("#num li").eq(index).addClass("on").siblings().removeClass("on"); 36 } 37 </script>