jq輪播圖實現

html基本框架以下：

 1 <div class="out">
 2     <ul class="img">
 3         <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
 4         <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
 5         <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
 6         <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
 7         <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
 8     </ul>
 9     <ul class="num"></ul>
10     <div class="left btn"><</div>
11     <div class="right btn">></div>
12 </div>

它的css樣式以下：（供參考）

<style> *{ margin: 0; padding: 0;
        } ul{ list-style: none;
        } .out{ width: 730px; height: 454px; margin: 50px auto; position: relative;
        } .out .img li{ position: absolute; left: 0; top: 0;
        } .out .num{ position: absolute; left:0; bottom: 20px; text-align: center; font-size: 0; width: 100%;
        } .out .btn{ position: absolute; top:50%; margin-top: -30px; width: 30px; height: 60px; background-color: aliceblue; color: black; text-align: center; line-height: 60px; font-size: 40px; display: none;
        } .out .num li{ width: 20px; height: 20px; background-color: black; color: #fff; text-align: center; line-height: 20px; border-radius: 60%; display: inline; font-size: 18px; margin: 0 10px; cursor: pointer;
        } .out .num li.active{ background-color: red;
        } .out .left{ left: 0;
        } .out .right{ right: 0;
        } .out:hover .btn{ display: block; color: white; font-weight: 900; background-color: black; opacity: 0.8; cursor: pointer;    /* 頁面顯示一個手勢樣*/
        } .out img { height: 100%; width: 100%;
        }
    </style>

接下來就是重頭戲了，看看js實現：

引入的jquery要放在本身寫的js代碼上面；

<script src="jquery-1.9.1.min.js"></script>
<script> $(function(){ var size=$(".img li").size(); //首先獲取到圖片的長度
        for (var i= 1;i<=size;i++){ var li="<li>"+i+"</li>"; $(".num").append(li); //動態添加底部小圓點
 } $(".num li").eq(0).addClass("active"); $(".num li").mouseover(function(){ $(this).addClass("active").siblings().removeClass("active"); //給你放上的底部圓點添加樣式，其它的圓點去掉active樣式
            var index=$(this).index(); i=index; $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); //第index個圖片淡入，其它的圖片淡出
 }); i=0; var t=setInterval(move,1500);// setInterval方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉
        function move(){ i++; if(i==size){ i=0; //達到圖片的尾部時，返回開頭
 } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } function moveL(){ i--; if(i==-1){ i=size-1; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $(".out").hover(function(){ //鼠標懸停時，中止調用函數
 clearInterval(t); },function(){ //鼠標移開以後定時器啓動
 t=setInterval(move,1500); }); $(".out .right").click(function(){ move() }); $(".out .left").click(function(){ moveL() }) }); </script>