JQuery實現簡單的輪播圖基本思路

demo點這里

需要達到的效果

常見的輪播圖組件
自動翻頁，左右跳轉按鈕，下方是index
index顯示了當前圖片位置，左右按鈕就是更改當前位置
第一個版本暫時不定義api了，寫簡單點

大概思路

用banner隱藏超出部分的圖片
imageList是inline
要顯示的話就float到標簽位置

首先是html

從sublime換了webstorm，自帶了emmet插件
也就是可以這樣寫
div.wrapper>div.banner>ul.imageList>(li>img)*4^img+img>ul.indexList>(li>img)*4
tab之后就是這個效果了：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="wrapper"> <div class="banner"> <ul class="imageList"> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> <img src="" alt=""><img src="" alt=""> <ul class="indexList"> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> </div> </div>

 

emmet還是挺方便的

css

為了使banner遮擋其他元素，overflow:hidden
然后 imgList的li 全部都float:left,display:inline
這樣的話就可以在后面左右滑了
左右按鍵和indexList需要用position:absolute來定位
這倆就用絕對值50%再margin一個負值來居中

jquery

主要是通過一個changeTo()來完成到指定圖片的跳轉
三個直接事件：自動換、點擊左右、點擊indexList
都是對changeTo()的不同調用：

1 2 3 4 5

function changeTo(num){ var goLeft = num * 800; $(".imgList").animate({left: "-" + goLeft + "px"},500); $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn"); }

 

還有就是通過設置全局變量的方法來添加一個循環：

1 2 3 4 5 6 7 8

var autoChange = setInterval(function () { if(index<3){ index++ }else { index=0 } changeTo(index) },1000);

 

js代碼中需要用到重新開始循環（如wrapper:hover）
只需要重新為autoChange賦相同的值即可再開始循環