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>