Swiper轮播图

项七

于 2024-07-15 10:39:17 发布

阅读量183

点赞数 7

文章标签：前端 javascript

本文链接：https://blog.csdn.net/jxl20010909/article/details/140384860

版权

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper</title>
    <link rel="stylesheet" href="../css/swiper.css">
</head>
<body>
    <div class="swiper">
        <div class="cont">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0" alt="猫">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.31df3a5a2d8462228734f95d459883e2?rik=7EE6TeWDk%2f%2bctQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214331.jpg&ehk=SpI7mz%2byLqOkT8BL79jcd3iCtQYNFlBHQzbtF1p0vuQ%3d&risl=&pid=ImgRaw&r=0" alt="湖光">
            <img src="https://img.zcool.cn/community/01b2945b0663dda801218cf4617993.jpg@3000w_1l_0o_100sh.jpg" alt="海景">
            <img src="https://img.zcool.cn/community/0182b75a6f1ec4a80120a12304672f.jpg@2o.jpg" alt="山">
        </div>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
        <p class="nav">
            <button class="checked"></button>
            <button></button>
            <button></button>
            <button></button>
        </p>
    </div>

</body>
</html>
<script src="../js/swiper.js"></script>

2.CSS

*{margin: 0;padding: 0;}
ul,li,ol{list-style-type: none;}
button{cursor: pointer;border: none;background: rgba(255, 255, 255, 1);}
.swiper{
    width: 800px;
    height: 400px;
    overflow: hidden;
    border: 1px #ccc solid;
    margin: 100px auto;
    position: relative;
}
.cont{
    width: 3200px;
    height: 400px;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
}
img{
    width: 800px;
    height: 400px;
}
span{
    position: absolute;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    top:175px;
    color: #f00;
    font-size: 30px;
}
.left{
    left: 20px;
}
.right{
    right: 20px;
}
.nav{
    width: 90px;
    height: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: calc(50% - 45px);
    top: 360px;
}
.nav button{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ccc;
}
.nav .checked{
    background: #04beff;
}

3.JS

var cont = document.getElementsByClassName('cont')[0];
var left = document.getElementsByClassName('left')[0];
var right = document.getElementsByClassName('right')[0];
var nav = document.getElementsByClassName('nav')[0];
var button = document.querySelectorAll('.nav button');

var step = 0;
var timmer;

// 导航点
function navButton(){
    for(let i = 0;i<button.length;i++){
        button[i].className='';
    }
    if(step==0){
        button[0].className='checked';
    }else if(step==-800){
        button[1].className='checked';
    }
    else if(step==-1600){
        button[2].className='checked';
    }else if(step==-2400){
        button[3].className='checked';
    }
};
// 自动播放
function autoPlay(){
    timmer = setInterval(function(){
        step-=800;
        if(step<-3200 || step==-3200){
            step=0;
        }
        cont.style.left=step+'px';
        navButton();
    },2000);
} 
autoPlay();

// 点击左键
left.onclick = function(){
    step-=800;
    if(step<-3200 || step==-3200){
        step=0;
    }
    cont.style.left=step+'px';
    clearInterval(timmer);
    autoPlay();
    navButton();
};

// 点击右键
right.onclick = function(){
    step+=800;
    if(step>0){
        step=-2400;
    }
    cont.style.left=step+'px';
    clearInterval(timmer);
    autoPlay();
    navButton();
};
// 点击导航点
button.forEach(function(item,index) {
    item.addEventListener('click',function(e){
        console.log(e,index);
        for(let i = 0;i<button.length;i++){
            button[i].className='';
        }
        e.target.className='checked';
        step = index * -800;
        cont.style.left=step+'px';
        clearInterval(timmer);
        autoPlay();
        navButton();
    });
});