用jQuery写轮播图

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="index.css">
    <script src="jquery-3.3.1.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
<div class="container">
    <div class="warp-head">
        <span class="left"><</span>
        <span class="right">></span>
        <div class="dot">
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
    </div>
    <div class="warp-body">
        <ul class="img">
            <li><img src="images/1.jpg" style="width:500px; height:300px"></li>
            <li><img src="images/2.jpg" style="width:500px; height:300px"></li>
            <li><img src="images/3.jpg" style="width:500px; height:300px"></li>
            <li><img src="images/4.jpg" style="width:500px; height:300px"></li>
            <li><img src="images/5.jpg" style="width:500px; height:300px"></li>
        </ul>

    </div>
</div>

</body>
</html>

JS:

$(function () {
    let index = 0;
    let index1 = 4;
    let timer;
    //1.方向键
    $(".warp-head").hover(function () {
        $(".warp-head span").css({"display": "inline-block"});
        stopPlay();
    }, function () {
        $(".warp-head span").css({"display": "none"});
        timerPlay();
    });
    //2.自动播放

    timerPlay();
    function timerPlay() {
        timer = setInterval(autoPlay, 2000);
    }
    function autoPlay() {

        index++;
        if (index > 4) {
            index = 0;
        }
        $(".dot li").eq(index).css({
            "background": "#999",
            "border": "1px solid #ffffff"
        }).siblings().css({
            "background": "#379a79",
            "border": ""
        });
        $(".img li").eq(index).stop().fadeIn(1000, "linear").siblings().fadeOut(1000, "linear");
    }
    function autoPlay1() {
        index1--;
        if (index1 < 0) {
            index1 = 4;
        }
        $(".dot li").eq(index1).css({
            "background": "#999",
            "border": "1px solid #ffffff"
        }).siblings().css({
            "background": "#379a79",
            "border": ""
        })
        $(".img li").eq(index1).stop().fadeIn(1000, "linear").siblings().fadeOut(1000, "linear");

    }

    //2.1停止播放
    function stopPlay() {
        clearInterval(timer)
    }

    //3.上翻下翻点击事件
    $(".right").on("click", autoPlay);
    $(".left").on("click", autoPlay1);
});

CSS:

*{
    list-style: none;
    margin: 0;
    padding: 0;
}
.container{
    margin: 100px auto;
    width: 500px;
    height: 300px;
    overflow: hidden;
}
.warp-body{
    width: 500px;
    height: 300px;
}
.warp-head{
    position: absolute;
    width: 500px;
    height: 300px;
}
.warp-head span{
    position: relative;
    display: none;
    font-size: 36px;
    border: 1px solid #cccc;
    background-color: #cccc;
    opacity: .8;
    cursor: pointer;
    margin: 127px 15px;
    padding: 5px;
}
.left{
    float: left;

}
.right{
    float: right;
}
.img li img{
    cursor: pointer;
}
.dot{
    width: 170px;
    height: 15px;
    position: relative;
    margin: 260px auto;
}
.dot li{
    display: inline-block;
    height: 15px;
    width: 20px;
    background: #379a79;
    margin: 0 auto;
}

用jQuery写轮播图

推荐阅读