封装的轮播图小插件（简单易懂）

最新推荐文章于 2022-07-12 22:03:33 发布

水货——鲈鱼

最新推荐文章于 2022-07-12 22:03:33 发布

阅读量233

点赞数

文章标签： javascript jquery css

本文链接：https://blog.csdn.net/weixin_41162427/article/details/107785609

版权

封装的轮播图小插件（简单易懂）

轮播图效果

在这里插入图片描述

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
<div class="app">
    <div class="scroll">

        <img src="img/s1.jpg" alt="scrollImage" class="img current">
        <img src="img/s2.jpg" alt="scrollImage" class="img">
        <img src="img/s3.jpg" alt="scrollImage" class="img">
        <img src="img/s4.jpg" alt="scrollImage" class="img">
        <img src="img/s5.jpg" alt="scrollImage" class="img">

        <div class="lf"></div>
        <div class="lr"></div>
    </div>

    <script src="js/jquery-3.3.1.js"></script>
    <script src="main.js"></script>
    <script>
        window.addEventListener('load', function() {
            var leftArrow = $('.lf')[0];
            var rightArrow = $('.lr')[0];
            $.leftMouseEnter(leftArrow);
            $.leftMouseLeave(leftArrow);
            $.rightMouseEnter(rightArrow);
            $.rightMouseLeave(rightArrow);
            var imgs = $('.img');
            $.setDataIndex(imgs);
            var current = $('.current')[0];
            var currentIndex = current.getAttribute('data-index');
            $.leftCheck(leftArrow,imgs,current,currentIndex)
            $.rightCheck(rightArrow,currentIndex,imgs);
            var timer = setInterval(changeImage, 2000);


            function changeImage(){
                if (currentIndex < 4) {
                    imgs[currentIndex].classList.remove('current');
                    imgs[++currentIndex].classList.add('current');
                } else {
                    imgs[currentIndex].classList.remove('current');
                    currentIndex = 0;
                    imgs[currentIndex].classList.add('current');
                }
            }
        });


    </script>
</div>
</body>
</html>

//style.css
* {
    margin: 0;
    padding: 0;
}
.scroll>img{
    width: 80%;
    height:480px;
}
.app {
    width: 100%;
    margin: 50px 0;
    text-align: center;
}

.app .scroll {
    position: relative;
    display: inline-block;
    width: 1226px;
    height: 460px;
}


.app .scroll .img {
    display: none;
    width: 100%;
}

.app .scroll .current {
    display: block;
}

.scroll .lf {
    position: absolute;
    top: 50%;
    left: 10px;
    background-image: url("img/arrow.png");
    background-position: -83px 0;
    width: 41px;
    height: 69px;
    cursor: pointer;
    transform: translateY(-50%);
}

.scroll .lr {
    position: absolute;
    top: 50%;
    right: 10px;
    background-image: url('img/arrow.png');
    background-position: -123px 0;
    width: 41px;
    height: 69px;
    cursor: pointer;
    transform: translateY(-50%);
}

.dots {
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 160px;
}

.dots>span {
    display: inline-block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 3px solid rgba(204, 204, 204, 0.2);
    border-radius: 15px;
    cursor: pointer;
}

.dots>span:not(:last-child) {
    margin-right: 5px;
}

/* 小圆点的颜色 */
.dots .square {
    background: #f46;
}

//main.js
jQuery.extend({
    leftMouseEnter(btn){
        btn.addEventListener('mouseenter', function (){
            this.style.backgroundPosition='0 0';
        });
    },
    leftMouseLeave(btn){
        btn.addEventListener('mouseleave', function (){
            btn.style.backgroundPosition='-83px 0';
        });
    },
    rightMouseEnter(btn){
        btn.addEventListener('mouseenter', function (){
            this.style.backgroundPosition='-42px 0';
        });
    },
    rightMouseLeave(btn){
        btn.addEventListener('mouseleave', function (){
            this.style.backgroundPosition='-123px 0';
        });
    },
    setDataIndex(imgs){
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].setAttribute('data-index', i);
        }
    },
    leftCheck(leftArrow,imgs,current,currentIndex){

        leftArrow.addEventListener('click', function() {
            for(let i=0;i<imgs.length;i++){
                //先清除每张图片的current样式
                imgs[i].classList.remove('current');
            }
            if (currentIndex > 0) {
                imgs[currentIndex].classList.add('current');
                currentIndex--;
            } else {
                imgs[currentIndex].classList.add('current');
                currentIndex = 4;
                imgs[currentIndex].classList.remove('current');
            }

        });
    },
    rightCheck(rightArrow,currentIndex,imgs) {
        rightArrow.addEventListener('click',function(){
            if (currentIndex < 4) {
                imgs[currentIndex].classList.remove('current');
                imgs[++currentIndex].classList.add('current');
            } else {
                imgs[currentIndex].classList.remove('current');
                currentIndex = 0;
                imgs[currentIndex].classList.add('current');
            }
        });
    },
})