干货！干货！---轮播图插件

最新推荐文章于 2022-09-09 11:47:53 发布

✧* ꧁柠檬ヤ汽水꧂✧*

最新推荐文章于 2022-09-09 11:47:53 发布

阅读量207

点赞数

分类专栏： jquery 轮播图插件文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/qq_44381873/article/details/105018223

版权

jquery 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

插件

3 篇文章 0 订阅

订阅专栏

轮播图

2 篇文章 0 订阅

订阅专栏

轮播图插件

1、基础样式布局：

<style>
        .box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
        .box .imgbox{}
        .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
        .imgbox a:nth-child(1){left:0;}
        .imgbox img{width: 1000px;height: 300px;}

        .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
        #left{left:0;}
        #right{right: 0;}

        .list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);}
        .list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
        .list span.active{background: red;color: #fff;}

    </style>

2、绑定图片地址：

<body>
    <div class="box banner1">
        <div class="imgbox">
            <a><img src="../img/banner1.jpg" alt=""></a>
            <a><img src="../img/banner2.jpg" alt=""></a>
            <a><img src="../img/banner3.jpg" alt=""></a>
            <a><img src="../img/banner4.jpg" alt=""></a>
            <a><img src="../img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
    </div>

</body>

3、引入外部文件：

<script src="../jquery.js"></script>
<script src="jquery.banner.1.0.js"></script>

外部文件 jquery.js是jquery官网下载的一代版本。

外部文件 jquery.banner.1.0.js如下：

;(function($){
    "use strict";

    // $.fn.banner = function(){}
    $.fn.extend({
        banner:function(ops){
            var cont = this;
            // 1.默认参数的处理
            ops.list = ops.list === false ? false : true;
            ops.autoPlay = ops.autoPlay === false ? false : true;
            ops.delayTime = ops.delayTime || 2000;
            ops.moveTime = ops.moveTime || 200;

            class ImgMove{
                constructor(ops){
                    this.child = ops.img;
                    this.left = ops.left;
                    this.right = ops.right;
                    this.list = ops.list;
                    this.delayTime = ops.delayTime;
                    this.moveTime = ops.moveTime;
                    this.autoPlay = ops.autoPlay;

                    this.iNow = 0;
                    this.iPrev = ops.img.length-1;

                    this.addEvent();
                    // 根据参数决定是否创建list
                    if(this.list){
                        this.createList();
                    }

                    // 根据参数决定是否自动播放
                    if(this.autoPlay){
                        this.autoPlayStart();
                    }
                }
                autoPlayStart(){
                    clearInterval(t);
                    var t = setInterval(()=>{
                        this.changeIndex(1);
                    },this.delayTime);
        
                    var that = this;
                    cont.hover(function(){
                        clearInterval(t);
                    },function(){
                        clearInterval(t);
                        t = setInterval(()=>{
                            that.changeIndex(1);
                        },that.delayTime)
                    })
                }
                createList(){
                    var str = ``;
                    for(var i=0;i<this.child.length;i++){
                        str += `<span index='${i}'>${i+1}</span>`;
                    }

                    $(`<div class='list'>${str}</div>`).appendTo(cont);

                    this.setActive();
                }
                setActive(){
                    cont.find(".list").children("span").eq(this.iNow).addClass("active").siblings().removeClass("active");
                }
                addEvent(){
                    var that = this;
                    // 判断左右按钮是否存在
                    if(
                        this.left !== undefined &&
                        this.left.length > 0 &&
                        this.right !== undefined && 
                        this.right.length > 0
                    ){
                        this.left.on("click",function(){
                            that.changeIndex(-1);
                        })
                        this.right.on("click",function(){
                            that.changeIndex(1);
                        })
                    }

                    cont.on("click",".list span",function(){
                        // console.log(this);
                        that.listChangeIndex(this);
                    })
                }
                listChangeIndex(tar){
                    if($(tar).index() > this.iNow){
                        this.listMove(1,$(tar).index());
                    }
                    if($(tar).index() < this.iNow){
                        this.listMove(-1,$(tar).index());
                    }
                    this.iNow = $(tar).index();

                    this.setActive();
                }
                listMove(direct,index){
                    this.child.eq(this.iNow).css({
                        left:0
                    }).stop().animate({
                        left:-this.child.eq(0).width() * direct
                    },this.moveTime).end().eq(index).css({
                        left:this.child.eq(0).width() * direct
                    }).stop().animate({
                        left:0
                    },this.moveTime)
                }

                changeIndex(direct){
                    if(direct == -1){
                        if(this.iNow == 0){
                            this.iNow = this.child.length-1;
                            this.iPrev = 0;
                        }else{
                            this.iNow--;
                            this.iPrev = this.iNow + 1;
                        }
                    }else{
                        if(this.iNow == this.child.length-1){
                            this.iNow = 0;
                            this.iPrev = this.child.length-1;
                        }else{
                            this.iNow++;
                            this.iPrev = this.iNow - 1;
                        }
                    }
                    this.move(direct);
                }
                move(direct){
                    this.child.eq(this.iPrev).css({
                        left:0
                    }).stop().animate({
                        left:-this.child.eq(0).width() * direct
                    },this.moveTime).end().eq(this.iNow).css({
                        left:this.child.eq(0).width() * direct
                    }).stop().animate({
                        left:0
                    },this.moveTime)

                    this.setActive();
                }
            }

            new ImgMove(ops);
            
        }
    })

})(jQuery);

4、核心代码：

<script>
    // 1.确定插件的执行方式
        // jq的插件，通过jq执行
        // 又因为轮播图在操作页面上的元素
        // 所以将方法绑定给jq的DOM元素
        // $().banner()
    // 2.确定参数的内容：(示例dome)
        $(".banner1").banner({
            // 必传
            img:$(".banner1").children(".imgbox").find("a"),
            // 可选，传了就有功能，没传就没有功能
            left:$(".banner1").find("#left"),
            right:$(".banner1").find("#right"),
            // 可选，默认为true，true就有功能，false就没有功能
            list:true,
            // 可选，默认为true，true就有功能，false就没有功能
            autoPlay:true,
            // 可选，默认为2000
            delayTime:3000,
            // 可选，默认为200
            moveTime:300
        })
        

        $(".banner2").banner({
            // 必传
            img:$(".banner2").children(".imgbox").find("a"),
            list:false
        });

</script>

5.看效果：

✧* ꧁柠檬ヤ汽水꧂✧*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
干货！干货！---轮播图插件

轮播图插件1、基础样式布局：<style> .box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;} .box .imgbox{} .imgbox a{width: 1000px;height: 300px;p...
复制链接

扫一扫