?用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 復制代碼

轉載于:https://www.cnblogs.com/aijindi/p/3868669.html

總結

以上是生活随笔為你收集整理的JQuery实现滚动广告（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。