上次PO了一个Javascript实现的图片轮播。即使做了函数封装，代码量还是有点冗余。复用率还是不够高。
下面用JQ实现一下图片轮播
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>
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 }
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 //鼠标点击触发函数 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 //改变显示的内容 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实现的效果大同小异（下面是JS的图片轮播）
http://www.cnblogs.com/adelina-blog/p/5885130.html
就不PO图片上来了
以上内容，如有错误请指出，不甚感激。