html部分
| - | ------------------------------------------------------------------------ |
| | <html lang="en"> |
| | |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <script src="[./jquery-1.11.1.min.js](./jquery-1.11.1.min.js)"></script> |
| | <script src="[./demo.js](./demo.js)"></script> |
| | <title>Document</title> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | } |
| | |
| | .imgList { |
| | width: 350px; |
| | margin: 20px; |
| | position: relative; |
| | height: 200px; |
| | } |
| | |
| | .imgList ul li { |
| | margin: 0; |
| | padding: 0; |
| | list-style: none; |
| | line-height: 0; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | |
| | } |
| | |
| | .imgList img { |
| | width: 100%; |
| | } |
| | </style> |
| | </head> |
| | |
| | <body> |
| | <div class="test"> |
| | <ul> |
| | <li><img src="[./1.jfif](./1.jfif)" alt=""></li> |
| | <li><img src="[./2.jfif](./2.jfif)" alt=""></li> |
| | <li><img src="[./3.jfif](./3.jfif)" alt=""></li> |
| | <li><img src="[./4.jfif](./4.jfif)" alt=""></li> |
| | <li><img src="[./5.jfif](./5.jfif)" alt=""></li> |
| | </ul> |
| | </div> |
| | <div class="test"> |
| | <ul> |
| | <li><img src="[./1.jfif](./1.jfif)" alt=""></li> |
| | <li><img src="[./2.jfif](./2.jfif)" alt=""></li> |
| | <li><img src="[./3.jfif](./3.jfif)" alt=""></li> |
| | <li><img src="[./4.jfif](./4.jfif)" alt=""></li> |
| | <li><img src="[./5.jfif](./5.jfif)" alt=""></li> |
| | </ul> |
| | </div> |
| | <div class="test"> |
| | <ul> |
| | <li><img src="[./1.jfif](./1.jfif)" alt=""></li> |
| | <li><img src="[./2.jfif](./2.jfif)" alt=""></li> |
| | <li><img src="[./3.jfif](./3.jfif)" alt=""></li> |
| | <li><img src="[./4.jfif](./4.jfif)" alt=""></li> |
| | <li><img src="[./5.jfif](./5.jfif)" alt=""></li> |
| | </ul> |
| | </div> |
| | <script src="[./script.js](./script.js)"></script> |
| | </body> |
| | |
| | </html>
js部分
console.log("global",this)
}
global_function();
$.jQuary_global_function=function(){
console.log("jQuary",this)
}
$.jQuary_global_function();
$.fn.setRedBackground=function(){
console.log("jQuary.fn",this)
$(this).css('background','red')
} */
//设置时间
var controls=$('.test').imgList(1);
js封包部分
$.fn.imgList=function(time){
var $this = $(this)
var controls=$this.map(function(i,o){
var $o=$(o);
var $imgs=$o.find('img')
var runId=0;
var runTime=(time&&time*1000)||1000;
var current=0;
var max=$imgs.length
//效果同上
/* var runTime;
if(time != undefined){
runTime=time*1000;
}else{
runTime=1000;
} */
if($imgs.length==0)throw"do not have images"
$o.addClass('imgList');
$imgs.hide().eq(0).show()
var showImg=function(index){
$imgs.fadeOut().eq(index).fadeIn();
}
var start=function(){
if(runId==0){
runId=setInterval(function(){
if(current>=max-1)current=-1;
showImg(++current)
},runTime);
}
}
var stop=function(){
clearInterval(runId);
runId=0;
}
start()
return{
start:start,
stop:stop
}
})
return{
start:function(index){
if(index==undefined){
for (var i=0;i<controls.length;i++){
controls[i].start();
}}else{
controls[index].start()
}
},
stop:function(index){
if(index==undefined){
for (var i=0;i<controls.length;i++){
controls[i].stop();
}
}else{
controls[index].stop()
}}
}
}
