jquery轮播图插件
这是效果图
一、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>Titletitle>
<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<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+=`> ${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(){
this._obj.rightClick();
},this._obj.delayTime);
this.hover(function () {
clearInterval(that._obj.t)
},function () {
that._obj.t=setInterval(()=>{
that._obj.rightClick();
},that._obj.delayTime);
})
}
}
})($);