图片自动轮播（仿淘宝？？）

先上效果图（给美宅疯狂打call~）

是不是你们要找的效果，是的话就继续往下看hahaha

上重点（敲黑板）！！！
js

 <script>
        $(function () {
            var containli=$('.contain > li');/*获取背景图的li标签*/
            var index=containli.index();/*获取显示的li标签的索引*/
            var count=containli.length;/*获取li标签的个数*/
            var btnli =$('.btn > li');/*获取数字的li标签*/

            var left=$('#left');/*获取上一张的按钮*/
            var right=$('#right');/*获取下一张的按钮*/

            /*改变containli标签中的图片和btnli标签中的样式的事件*/
            function changeImg(index){
                containli.eq(index).fadeIn().siblings('li').fadeOut();
                btnli.eq(index).addClass('selectBtn').siblings('li').removeClass('selectBtn');
            }
            /*上一张的按钮点击事件*/
            left.click(function () { 
                 index--;//索引自减
                 if (index<0){ //判断索引是否越界
                     index=count-1;/*越界就初始化一个值*/
                 }
                  changeImg(index);/*改变containli标签中的图片和btnli标签中的样式*/
            });
            /*下一张的按钮点击方法*/
            right.click(function () {
                 rightImg();
            });
            /*下一张图片（自动播放）*/
            function rightImg() {
                index++;//索引自增
                if (index>=count){
                    index=0;/**/
                }
                changeImg(index);
            }
            /*鼠标悬停改变containli标签中的图片和btnli标签中的样式*/
            btnli.hover(function () {
                 index=$(this).index();/*获取鼠标悬停所在的btnli标签索引*/
                 changeImg(index);
            });

            play();/*开始播放*/

            /*循环轮播*/
            function play(){ 
                time=setInterval(rightImg,1000);/*循环轮播时间和事件*/
            }
            /*停止轮播*/
            function stop() {
                clearInterval(time);
            }

           /*鼠标移入停止轮播*/
            $('.contain').mouseover(function () { 
                stop();
            });
            /*鼠标移出开始轮播*/
            $('.contain ').mouseout(function () {
                play();
            });
            $('span').mouseover(function () {
                stop();
            });
            $('span').mouseout(function () {
                play();
            });
            $('.btn').mouseover(function () {
                stop();
            });
            $('.btn').mouseout(function () {
                play();
            });

        });
    </script>

记得引入js文件

<script src="js/jquery.min.js"></script>

---

再上html

<div id="carousel">
    <!--背景图-->
    <ul class="contain">
        <!--图片不平铺，居中-->
        <li style="background: url('img/A1.jpg') no-repeat center"></li>
        <li style="background: url('img/A2.jpg') no-repeat center"></li>
        <li style="background: url('img/A3.jpg') no-repeat center"></li>
    </ul>
   <!--数字-->
    <ul class="btn">
        <li class="selectBtn">
            <img src="img/1.png">
        </li>
        <li><img src="img/2.png"></li>
        <li><img src="img/3.png"></li>
    </ul>
    <!--左右-->
    <span id="left">&lt;</span>
    <span id="right">&gt;</span>
</div>

最后上样式css

 body,ul{/*消除浏览器默认的间隔*/
            margin: 0;
            padding: 0;
        }
        ul{ list-style: none;}
        #carousel{
            position: relative;
            width: 100%;
            height: 500px;
            overflow: hidden;/*超过范围，隐藏多余的内容*/
            z-index: 8;
            margin-top: 100px;
        }
        .contain li{
            height: 500px;
            z-index: 10;
        }
        .btn{
            position: absolute;
            display: inline-block;
            top: 450px;
            left:48%;
        }
        .btn li{
            cursor: pointer;/*鼠标箭头*/
            display: inline-block;
            line-height: 13px;
            width: 13px;
            height: 13px;
            text-align: center;
            z-index: 11;
            margin: 0 10px;/*图标之间的距离*/
        }
        .btn .selectBtn{/*当前图片的图标*/
            background-color: blue;
        }
        span{
            display: inline-block;
            text-align: center;
            font-size: 80px;
            font-weight: 700;
            opacity: 0.1; /*透明度*/
            cursor: pointer;
        }
        span:hover {
            opacity: 0.7;
        }
        #left {
            position: absolute;
            top: 150px;
            left: 100px;
            z-index: 12;
        }
        #right {
            position: absolute;
            top: 150px;
            right: 100px;
            z-index: 12;
        }

大功告成，把图片换成你自己的就可以用了。

---

最后的最后再留点小笔记
1.eq()的使用方法
$(“body”).find(“div”).eq(2).addClass(“blue”);
意义：先在“body”里面找到“div”元素，再找到和“div”同级的第二个“div“（由于.ep（）的索引是从0开始的，eq（2）就是找到第三个元素）

2.siblings()遍历
3.fadeOut（） fadeIn（）淡入淡出

4.setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
setInterval(code,millisec[,”lang”])
code-要调用的函数或要执行的代码串。
millisec-周期性执行或调用 code 之间的时间间隔，以毫秒计。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数

---

是不是很完美