图片自动轮播

一、 布局

<div class="ad">
    <ul class="slider clearfix" >
        <li>
            <img src="image/1.png"/>
        </li>
        <li>
            <img src="image/2.png"/>
        </li>
        <li>
            <img src="image/3.png"/>
        </li>
        <li>
            <img src="image/4.png"/>
        </li>
        <li>
            <img src="image/5.png"/>
        </li>
        <li>
            <img src="image/1.png"/><!-- 在后面加一个第一个，这样的话就不会从最后一张又滑到第一张了 -->

        </li>
    </ul>
    <ul class="num clearfix" >
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

二、CSS代码

* {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .ad {
            position: relative;
            overflow: hidden;
            height: 500px;
            width: 950px;
            margin: 0 auto
        }

        .ad .slider {
            width: 5700px;
            position: absolute
        }

        .ad .slider li {
            float: left;
        }

        .ad .slider li img {
            display: block;
        }

        .ad .num {
            width: 157px;
            border-radius: 12px;
            padding: 10px 13px;
            background: #767676;
            position: absolute;
            bottom: 14px;
            left: calc(50% - 92px);
        }

        .ad .num li {
            width: 22px;
            height: 3px;
            cursor: pointer;
            background: #c8c8c8;
            float: left;
            margin-right: 9px;
            border: 1px solid #fff;
        }

        .ad .num li:nth-last-child(1) {
            margin-right: 0;
        }

        .ad .num li.active {
            background: #000;
        }

三、JS代码

<script src="js/jquery.js"></script>
//图片轮播
    var liLen = $(".num > li").length;
    var index = 0;
    var adTimer;

    $(".num li").mouseover(function () {
        index = $(this).index();
        var adWidth = $(".ad").width();
        $(".slider").stop(true, false).animate({left: -adWidth * index}, 1000);  //用animate实现动画改变定位,
        $(".num li").removeClass("active").eq(index).addClass("active");//给对应的li一个选中的样式
    }).eq(0).mouseover();   //默认第一个
    //滑入停止动画，滑出开始动画.
    $('.ad').hover(function () {
        clearInterval(adTimer);
    }, function () {
        adTimer = setInterval(function () {
            index++;
            var adWidth = $(".ad").width(); //大盒子的宽度
            $(".slider").stop(true, false).animate({left: -adWidth * index}, 1000);
            $(".num li").removeClass("active").eq(index).addClass("active");

            if (index == liLen) {
                $(".slider").stop(true, false).animate({left: -adWidth * index}, 1000, function () {
                    $(".slider").css("left", 0); // 当到最后一张时,就能用到上面那个最后加的那个,index==0,然后在后面加一个动画排序,让它迅速又变成一开始
                });
                index = 0;
                $(".num li").removeClass("active").eq(index).addClass("active");
            }
        }, 2000);
    }).trigger("mouseleave");   //模拟鼠标离开事件

                这就是结果，是会自动轮播的