3.jquery轮播

css

*{margin:0;padding:0}
.content{
    cursor: pointer;
    position: relative;
    width:600px;height:400px;
    margin-left: auto;margin-right: auto;
    border:1px solid #333;
}
#list{
    position: absolute;
    width:600px;
    height:400px;
}
#list img,#prev,#next,#btns{
    position: absolute;
}
#list img:not(:first-child){
    display: none;
}
#prev,#next{
    cursor: pointer;
    top:50%;transform: translateY(-50%);
    z-index: 100;width:40px;height:70px;
    background:url("../images/icon-slides.png");
    border:none;
}
#prev{
    background-position-x:80px;
}
#prev:hover{
    background-position: 0;
}
#next:hover{background-position-x: -43px}
#next{
    right:0;
    background-position-x:-125px;
}
#btns{z-index: 101;
    transform: translateX(-50%);
    bottom: 20px;left:50%;}
#btns .current{
    background:orangered;
}    
#btns>span{
    cursor: pointer;
    width:20px;
    height:20px;
    display: inline-block;
    border-radius: 50%;
    border:1px solid #fff;
    background-color:rgba(44,44,44,.3);
}

html

  <div class="content">
        <div id="list">
            <img src="images/01.png" alt="">
            <img src="images/02.png" alt="">
            <img src="images/03.png" alt="">
            <img src="images/04.png" alt="">
            <img src="images/05.png" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

jqurey

 <script>
        $(function () {
            var index = 0;
            var timer;
            // 1.点击next
            $("#next").click(function () {
                index++;
                if (index > 4) {
                    index = 0;
                }
                animate(index);
            })
            // 2.点击prev
            $("#prev").click(function () {
                index--;
                console.log(index);
                if (index < 0) {
                    index = 4;
                }
                animate(index);
            })
            // 3.焦点随左右按钮变化
            function animate(index) {
                $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            }
            // 4.点击按钮,让对应的图片出现
            $("#btns span").click(function () {
                $(this).addClass("current").siblings().removeClass("current");
                index = $(this).index();
                $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
            })
            //5.自动播放
            function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 1000)
            }
            function stop() {
                clearInterval(timer)
            }
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
        })
    </script>