jquery轮播图插件

最新推荐文章于 2024-05-09 09:49:17 发布

lujj_1997

最新推荐文章于 2024-05-09 09:49:17 发布

阅读量693

点赞数

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

本文链接：https://blog.csdn.net/qq_39421320/article/details/103793175

版权

jquery轮播图插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是效果图
在这里插入图片描述
一、jq插件的开发规范：

1. 独立的js文件
2.命名:jquery.nav.1.0.js
3. 独立的空间:匿名函数
4. 严格模式:"use strict"
5.私有化$:给匿名函数传参，使用$接收，$变成了参数，也就是局部变量

二、如何将插件的功能绑定给jq

假设有一个对象myObj
var myObj = {
    _qfshow:function(){
        console.log("hello qf");
   }
 }
1.jq的全局绑定方法
$.cookie()这种是纯功能插件
jq的全局绑定方法3种：
 1)$.extend(myObj)
 2)$.extend($,myObj)
 3)$._qfshow = myObj._qfshow
2.jq的局部绑定方法

$("div").validate这种是操作到DOM的功能插件
jq的局部绑定方法4种：
 1)$.fn.extend(myObj)
 2)$.fn.extend($.fn,myObj)
 3)$.extend($.fn,myObj)
 4)$.fn._qfshow = myObj._qfshow

三、确定插件的功能：

   轮播图插件：
	左右按钮切换
	小圆点切换
	自动播放
	因为轮播图插件操作到了页面，索引将插件的执行方法绑定到jq的DOM对象身上，所以选择局部绑定。

这是主页的html，css和js代码（外面建一个div用来往里面放轮播图）：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{margin: 20px auto;border: solid 1px black}
    </style>
</head>
<body>
    <div class="banner1 box"></div>

</body>
<script src="jquery-1.12.4.js"></script>
<script src="jquery.banner.1.0.js"></script>
<script>
    // 3.怎么执行banner插件
    $(".banner1").banner({
        //必传,数组,图片路径
        img:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"],
        btn:true,              //可选，默认为true 左右按钮
        list:true,             //可选，默认为true 小圆点
        autoPlay:true,         //可选，默认为true 自动播放
        delayTime:3000,         //可选，默认为2000	自动播放定时器的时间
        moveTime:500,           //可选，默认为200 图片的移动时间
        index:0                 //可选，默认为0
    });

</script>
</html>

这是jquery.banner.1.0.js的代码：

;(function($){
    //交给别人使用的插件，必须严格要求自己
    "use strict";
    //传参让$,jQuery私有化
    $.fn.banner = function(options){ //fn是dom对象
        var that = this;
        // class Banner{
        //     constructor(o){
        //         o
        //     }
        // }
        // new Banner(options)

        // console.log(this);
        // this.btn = true;

        // 1.默认参数处理
        options = options || {};
        this._obj = {

            btn:options.btn===false ? false : true, //没传是undefined也是false
            list:options.list===false ? false : true,
            autoPlay:options.autoPlay===false ? false : true,
            delayTime:options.delayTime || 2000,
            moveTime:options.moveTime || 200,
            index:options.index || 0,
            iPrev:options.img.length-1,//可有可不有
            img:options.img || []
        };

        // 2.渲染布局:样式写到行内
        this._obj.init = function(){
            var str = ``;
            for(var i=0;i<this.img.length;i++){
                str += `<a href="##"><img src="${this.img[i]}"></a>`
            }
            that.html(`<div class="imgbox">${str}</div>`).css({
                width:1000,
                height:300,
                position:"relative",
                overflow:"hidden"
            }).children(".imgbox").css({
                width: 1000,
                height: 300,
            }).children("a").css({
                position: "absolute",
                left:1000,
                top:0,
                width: 1000,
                height: 300
            }).eq(0).css({
                left:0
            }).end().children("img").css({ //end()返回上一步才能找到children
                width: 1000,
                height: 300
            });
        }
        this._obj.init();
        this._obj.leftClick=function () {//this是left
            if (that._obj.index ==0){
                that._obj.index = that._obj.img.length-1;
                that._obj.iPrev=0;
            }else{
                that._obj.index--;
                that._obj.iPrev=that._obj.index+1;
            }
            that._obj.btnMove(1);
        }
        //点击右边的按钮
        this._obj.rightClick=function(){//this是right
            if (that._obj.index ==that._obj.img.length-1){
                that._obj.index = 0;
                that._obj.iPrev=that._obj.img.length-1;
            }else{
                that._obj.index++;
                that._obj.iPrev=that._obj.index-1;
            }
            that._obj.btnMove(-1);
        }
        //3.判断用户是否需要按钮功能
        if (this._obj.btn){
            //左右按钮的布局+样式
            $("<input type='button' id='left' value='<'>").css({
                left:0,
                marginLeft:20
            }).appendTo(this).//下一个兄弟就是右按钮
            after($("<input type='button' id='right' value='>'>").css({
                right:0,
                marginRight:20
            })).parent()
                .children("input").css({//集合操作input的定位
                    position:"absolute",
                    top:130,
                    width:40,
                    height:40,
                    border:"none",
                    background:"rgba(200,200,200,0.5)",
                    borderRadius:"50%",
                    color:"#ffffff"
                })
            //事件委托
            this.on("click","#left",that._obj.leftClick)
            this.on("click","#right",that._obj.rightClick)
            this._obj.btnMove=function (type) {
                // console.log(this.index,this.iPrev);
                let imgs=that.children(".imgbox").children("a");
                imgs.eq(this.iPrev).css({ //that是大框,找到a上一张的位置
                    left:0
                }).stop().animate({ //上一张向右走掉
                    left:imgs.eq(0).width()*type
                },this.moveTime).end().eq(this.index).css({ //有eq就有end为了返回上一步
                    left:-imgs.eq(0).width()*type
                }).stop().animate({
                    left:0
                },this.moveTime)
            if(!this.list) return;
                $(".list").children("li").css("background","rgba(200,200,200,0.6)")
                    .eq(this.index).css("background","red")//这里的当前是this.index
            }
        }
        //点击左边的按钮
        if (this._obj.list){
            let str="";//只在if中有效，用let快级作用域
            for (var i=0;i<this._obj.img.length;i++){
                str+=`<li>${i+1}</li>`;
            }
            $("<ul class='list'>").html(str).appendTo(this).css({//把li放进ul再放进那个外框div
                margin:0,
                padding:0,
                listStyle:"none",
                width:"100%",
                height:40,
                bottom:0,
                position:"absolute",
                display:"flex",
                justifyContent:"center",
                lineHeight:"40px",
                textAlign:"center"
            }).children("li").css({
                width:40,
                height:40,
                borderRadius: "50%",
                background:"rgba(200,200,200,0.6)",
                margin:"0 20px",
                textAlign: "center",
                cursor:"pointer"
            }).eq(0).css({
                background:"red"
            }).end().click(function () {//因为颜色是点击之后才变化
                if ($(this).index()>that._obj.index){ //当前点击的索引和上一个图片的索引的比较
                    that._obj.listMove($(this).index(),-1)
                }
                if ($(this).index()<that._obj.index){
                    that._obj.listMove($(this).index(),1)
                }
                that._obj.index = $(this).index();//索引设置成点击之后的索引

            })
            this._obj.listMove=function (iNow,type) {
                //赋值之前的移动，只是这次走的是this.index，进来的是iNow
                let imgs=that.children(".imgbox").children("a");
                imgs.eq(this.index).css({ //that是大框,找到a上一张的位置
                    left:0
                }).stop().animate({ //上一张向右走掉
                    left:imgs.eq(0).width()*type
                },this.moveTime).end().eq(iNow).css({ //有eq就有end为了返回上一步
                    left:-imgs.eq(0).width()*type
                }).stop().animate({
                    left:0
                },this.moveTime)
                //点击li的时候ul必存在，所以可以直接选
                $(".list").children("li").css("background","rgba(200,200,200,0.6)")
                    .eq(iNow).css("background","red")//这里的当前是iNOW
            }
        }
        if (this._obj.autoPlay){
            this._obj.t=setInterval(()=>{
                this._obj.rightClick();
            },this._obj.delayTime);
            this.hover(function () {
                clearInterval(that._obj.t)
            },function () {
                that._obj.t=setInterval(()=>{
                    that._obj.rightClick();
                },that._obj.delayTime);
            })
        }
    }
})($);

lujj_1997

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery轮播图插件

一、jq插件的开发规范：1. 独立的js文件2.命名:jquery.nav.1.0.js3. 独立的空间:匿名函数4. 严格模式:"use strict"5.私有化$:给匿名函数传参，使用$接收，$变成了参数，也就是局部变量二、如何将插件的功能绑定给jq假设有一个对象myObjvar myObj = { _qfshow:function(){ consol...
复制链接

扫一扫

专栏目录