用复用插件的形式写无缝衔接轮播图jQuery/JavaScript

最新推荐文章于 2024-09-20 11:38:47 发布

长庚启明

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量139

点赞数

文章标签： javascript jquery css html

本文链接：https://blog.csdn.net/weixin_42597658/article/details/111226205

版权

效果图如下：

在这里插入图片描述
亮点是一套代码可以生成多个可复用组件，还可以动态设置各个组件的动画时间，各组件互不干扰。
以下是代码：
html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="banner focus1">
        <ul class="img">
            <li><a href="#"><img src="./images/1.jpg" alt="第1张图片"></a></li>
            <li><a href="#"><img src="./images/2.jpg" alt="第2张图片"></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt="第3张图片"></a></li>
        </ul>
        <ul class="num"></ul>
        <div class="btn">
            <span class="prev">
                <</span> <span class="next">>
            </span>
        </div>
    </div>
    <div class="banner focus2">
        <ul class="img">
            <li><a href="#"><img src="./images/1.jpg" alt="第1张图片"></a></li>
            <li><a href="#"><img src="./images/2.jpg" alt="第2张图片"></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt="第3张图片"></a></li>
        </ul>
        <ul class="num"></ul>
        <div class="btn">
            <span class="prev">
                <</span> <span class="next">>
            </span>
        </div>
    </div>
</body>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/index2.js"></script>
<script>
    var banner1 = new banner();
    var banner2 = new banner();
    banner1.init({
        el:'.focus1',
        time:3000,
        delay:1000
    })
    banner2.init({
        el:'.focus2',
        time:3000,
        delay:1000
    })
</script>

</html>

css:

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

.banner {
    width: 1024px;
    height: 1820px;
    border: 2px solid #ccc;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.img {
    position: absolute;
    top: 0;
    left: 0
}

.img li {
    float: left;
}

.num {
    position: absolute;
    bottom: 60px;
    width: 100%;
    text-align: center;
    font-size: 0;
}

.num li {
    width: 40px;
    height: 40px;
    background: rgba(219, 77, 77, 0.5);
    display: block;
    border-radius: 100%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}
.btn span{
    display: block;
    width: 50px;
    height: 100px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 40px;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
}

.btn .prev {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -50px;
}

.btn .next {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -50px;
}

.num .active {
    background-color: rgb(238, 23, 23);
}

JavaScript：

function banner(){
    this.init=function (obj) {
        var _this = this;
        this.i = 0;
        this.timer = null;
        this.dom=$(obj.el);
        this.time=500;
        this.delay=1000;
        for(var i in obj){
            this[i]=obj[i]
        }
        this.delay+=this.time
        console.log(this.time, this.delay)
        _this.addClass();
        _this.event();
    },
    this.addClass=function () {
        for (var j = 0; j < this.dom.find('.img li').length; j++) {
            //动态创建圆点
            this.dom.find('.num').append('<li></li>')
        }
        this.dom.find('.num li').first().addClass('active'); //给第一个圆点添加样式
        var firstimg =  this.dom.find('.img li').first().clone(); //复制第一张图片
        this.dom.find('.img').append(firstimg).width( this.dom.find('.img li').length * ( this.dom.find('.img img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
    },
    this.event=function () {
        var _this = this;
        // 下一个按钮
        this.dom.find('.next').click(function () {
            _this.animate()
        })
        // 上一个按钮
        this.dom.find('.prev').click(function () {
            _this.animate('left')

        })

        //鼠标点击圆点
        this.dom.find('.num li').click(function () {
            var _index = $(this).index();
            _this.dom.find('.img').stop().animate({
                left: -_index * 1024
            }, _this.time);
            _this.dom.find('.num li').eq(_index).addClass('active').siblings().removeClass('active');
        })

        //定时器自动播放
        _this.timer = setInterval(function () {
            _this.animate()
        }, _this.delay)

        //鼠标移入，暂停自动播放，移出，开始自动播放
        this.dom.find('.banner').hover(function () {
            clearInterval(_this.timer);
        }, function () {
            _this.timer = setInterval(function () {
                _this.animate()
            },  _this.delay)
        })
    },
    this.animate=function (direction) {
        var _this=this;
        if (direction == "left") {
            _this.i--;
            if (_this.i == -1) {
                _this.i = this.dom.find('.img li').length - 2;
                this.dom.find('.img').css({
                    left: -(this.dom.find('.img li').length - 1) * 1024
                });
            }
        } else {
            _this.i++;
            if (_this.i == this.dom.find('.img li').length) {
                _this.i = 1;
                this.dom.find('.img').css({
                    left: 0
                });
            };
        }
        this.dom.find('.img').stop().animate({left: -_this.i * 1024},  _this.time);
        if (_this.i == this.dom.find('.img li').length - 1) {
            this.dom.find('.num li').eq(0).addClass('active').siblings().removeClass('active');
        } else {
            this.dom.find('.num li').eq(_this.i).addClass('active').siblings().removeClass('active');
        }
    }
}