自己動手豐衣足食之輪播圖一動態修改marginTop屬性實現輪播圖

標籤：

引言

     學習jQuery有年頭了，剛開始學習時自己動手寫過輪播圖，放的久了以至於忘了大致思路了。現在轉而做前端，抽空把jquery輪播圖拿出來寫一寫，把各種思路都自己練習練習，這裡主要使用動態修改marginTop來實現。

實現原理

     1、除第一張圖片外，其餘圖片全部隱藏，4張圖片重疊起來。

     2、導覽按鈕添加mouseover和mouseleave事件。

     3、設定interval函數，啟動定時器調用ShowImg函數。

     4、動態修改marginTop屬性達到上下輪播的效果，說道動態修改margin屬性，在以前滑動門中也是這個原理。

 

（圖片引用自橡樹小屋部落格）

 

實現代碼

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Index</title><script type="text/javascript" src="js/jquery-1.4.1.js"></script><style type="text/css">*{margin: 0;padding: 0;}ul li{list-style: none;}#scrollpics{width: 478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;}.num{position:absolute;right: 8px;bottom: 8px;}.num li {float:left;color:#FF7300;text-align: center;width: 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;}.num li.on {color:#fff;background-color: #FF7300;}</style><script type="text/javascript">var index=0;var adTimer;$(function(){var len = $("ul.num li").length;$(".num li").mouseover(function(){index=$(".num li").index(this);ShowImg(index);});$("#scrollpics").hover(function(){clearInterval(adTimer);},function(){adTimer=setInterval(function(){ShowImg(index);index++;if(index==len){index=0;}},3000)}).trigger(‘mouseleave‘);});function ShowImg(index){var adHeight=$("#scrollpics>ul>li:first").height();$(".slider").stop(true,false).animate({"marginTop":-adHeight*index+"px"},1000);$(".num li").removeClass("on").eq(index).addClass("on");}</script></head><body><div id="scrollpics"><ul class="slider"><li><img src="img/p1.jpg"></li><li><img src="img/p3.jpg"></li><li><img src="img/p4.jpg"></li><li><img src="img/p5.jpg"></li></ul><ul class="num"><li class="on">1</li><li>2</li><li>3</li><li>4</li></ul></div></div></body></html>

 

自己動手豐衣足食之輪播圖一動態修改marginTop屬性實現輪播圖