上次PO了一個Javascript實現(xiàn)的圖片輪播。即使做了函數(shù)封裝，代碼量還是有點冗余。復(fù)用率還是不夠高。

下面用JQ實現(xiàn)一下圖片輪播

?

html:

<div class="content"><div class="img_change"><div id="img_container" class="img_container"></div><div class="change_btn"><ul id="btn_container"></ul></div> </div></div> html代碼

css代碼：

1 *{ 2 padding: 0; 3 margin:0; 4 box-sizing: border-box; 5 } 6 .content{ 7 width: 700px; 8 margin:100px auto; 9 } 10 .img_change{ 11 position: relative; 12 width: 731px; 13 } 14 .img_container{ 15 width: 731px; 16 height: 300px; 17 } 18 .img_container img{ 19 position: absolute; 20 } 21 .change_btn{ 22 margin: 0 auto; 23 padding: 10px; 24 background: rgba(0,0,0,0.4); 25 } 26 .change_btn ul{ 27 list-style: none; 28 text-align: center; 29 } 30 .change_btn>ul>li{ 31 display: inline-block; 32 width:25px; 33 height: 10px; 34 background: #1e443f; 35 cursor: pointer; 36 opacity: 0.8; 37 margin-right: 10px; 38 } 39 .active{ 40 background: #d7d7d7 !important; 41 } css代碼

jq代碼：

1 $(function(){ 2 imgArr = ['banner-1.png','banner-2.png','banner-3.png']; 3 4 initData(); 5 6 startChange(); 7 8 $("#btn_container li").bind("click",clickBtn) 9 }) 10 11 //初始化 12 function initData(){ 13 var len = imgArr.length; 14 15 for(var i=0;i<len;i++){ 16 17 $("#img_container").append("<img src='./images/"+imgArr[i]+"'>"); 18 $("#btn_container").append("<li data-index='"+i+"'></li>"); 19 } 20 21 $("#img_container img:not(:first)").hide(); 22 $("#btn_container li:first").addClass("active"); 23 } 24 25 //輪播圖片 26 var timer = null; 27 var cur = 0; 28 function startChange(time){ 29 clearInterval(timer); 30 var speedTime = time || 4000; 31 32 timer = setInterval(function(){ 33 var next = cur+1 == imgArr.length ? 0:cur+1; 34 35 changeImg(cur,next); 36 37 cur = next; 38 39 },speedTime) 40 } 41 42 //鼠標(biāo)點擊觸發(fā)函數(shù) 43 function clickBtn(){ 44 clearInterval(timer); 45 var that = $(this); 46 var next = parseInt(that.attr("data-index")); 47 48 changeImg(cur,next); 49 startChange(); 50 51 cur = next; 52 } 53 54 //改變顯示的內(nèi)容 55 function changeImg(cur,next){ 56 $("#img_container img").eq(cur).fadeOut("2000"); 57 $("#btn_container li").eq(cur).removeClass("active"); 58 59 $("#img_container img").eq(next).fadeIn("2000"); 60 $("#btn_container li").eq(next).addClass("active"); 61 }

效果和JS實現(xiàn)的效果大同小異（下面是JS的圖片輪播）

http://www.cnblogs.com/adelina-blog/p/5885130.html

就不PO圖片上來了

?

以上內(nèi)容，如有錯誤請指出，不甚感激。

?

轉(zhuǎn)載于:https://www.cnblogs.com/adelina-blog/p/5917095.html

總結(jié)

以上是生活随笔為你收集整理的JQ_图片轮播的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。