jquery无缝轮播图

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="jquery-3.3.1.js"></script>
    <style>

    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <script src="../jquery-3.3.1.js"></script>

</head>
<body>

<div class="slider-box">
    <ul class="slider-list">
        <li class="slider-image"><img src="images/wallhaven-557342.jpg" /></li>
        <li class="slider-image"><img src="images/wallhaven-590621.jpg"/></li>
        <li class="slider-image"><img src="images/wallhaven-644594.jpg"/></li>
        <li class="slider-image"><img src="images/wallhaven-665520.jpg" /></li>
        <li class="slider-image"><img src="images/wallhaven-557342.jpg" /></li>
    </ul>
    <div class="dots">
        <ul>
            <li class="dot on"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
    </div>
    <div class="slider-button">
        <span class="prev">

css:

*{
    margin:0;
    padding:0;
    list-style: none;

}
.slider-box{
    position: relative;
    width:600px;
    height:300px;
    overflow: hidden;
    margin:200px;
}
.slider-list{
    width:3000px;
    height:300px;
    position:absolute;
}
.slider-list li{
    width:600px;
    height:300px;
    float:left;
}
.slider-image img{
    width:600px;
    height:300px;

}
.dots{
    width:120px;
    height:20px;
    position:absolute;
    background-color: rgba(0,0,0,.3);
    left:50%;
    margin-left:-60px;
    padding:2px;
    bottom: 0;
    border-radius: 20px;
}
.dots ul{
    position:absolute;
    left:50%;
    margin-left: -40px;
}
.dot{
    height:8px;
    width:8px;
    background-color: rgba(255,255,255,.3);
    float: left;
    margin:6px 6px;
    border-radius: 50%;
    cursor: pointer;
    transition:all ease 0.5s 0s;
}
.slider-button{
    width:600px;
    height:300px;
}
.prev{
    display: block;
    position: absolute;
    width:50px;
    height: 100%;
    font-family: iconfont;
    text-decoration: none;
    color:rgba(0,0,0,.2);
    font-size:30px;
    text-align: center;
    cursor: pointer;
    vertical-align:center;
    line-height: 300px;
}
.next{
    display: block;
    position: absolute;
    right:0;
    width:50px;
    height: 100%;
    font-family: iconfont;
    text-decoration: none;
    color:rgba(0,0,0,.2);
    font-size:30px;
    line-height: 300px;
    cursor: pointer;
}


.slider-button:hover span{
    background-color: rgba(0,0,0,.2);
    color:white;

}

.on{
    height:10px;
    width:10px;
    background-color: white;

}
@font-face {font-family: 'iconfont';
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iconfont.woff') format('woff'),
    url('../fonts/iconfont.ttf') format('truetype'),
    url('../fonts/iconfont.svg#iconfont') format('svg');
}

jquery:


$(function(){
    let i=0;
    let size=$('.slider-image').length;
    //     //小圆点开始
    $(".dot").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
        let index=$(this).index();
        i = index;//将小圆点索引赋值给轮播图索引
        $(".slider-list").stop().animate({ left: -index * 600 }, 600);
    });
    //小圆点结束

    //定时器开始
    let t = setInterval(function () { i++; move();},2000);
    $(".slider-box").hover(function () {
        clearInterval(t);
    }, function () {
        t = setInterval(function () { i++; move(); }, 2000);
    });
    //定时器结束

    //前后按钮开始
    $(".next").click(function () {
        i++;
        move();
    });
    $(".prev").click(function () {
        i--;
        move();
    });
    //前后按钮结束


    //轮播图移动开始
    function move(){
        if (i==5){
            $('.slider-list').css({left:0});
            i=1;
        }
        if(i==-1){
            $(".slider-list").css({left:-(size-1)*600});
            i=size-2;
        }
        $(".slider-list").stop().animate({ left: -i * 600 }, 600);
        // i++;
        if (i == size - 1) {
            $(".dot").eq(0).addClass("on").siblings().removeClass("on");
        } else {
            $(".dot").eq(i).addClass("on").siblings().removeClass("on");
        }
    }
});
//轮播图移动结束

猜你喜欢