jquery 自制广告轮播小插件

来源：互联网发布：java入门代码例子编辑：程序博客网时间：2024/05/22 05:25

<!doctype html> <html> <head> <title> test</title> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <script src="jquery-1.11.3.min.js"></script> <script src="adv_plugin.js"></script> <style> *{margin:0; padding:0;list-style:none;} .ctrlbtn{ position:absolute;left:110px; bottom:15px; } .ctrlbtn li{ float:left; margin:0 5px; width:22px; height:22px; cursor:pointer; line-height:22px;background:#b29f90;color:white;border-radius:50%;text-align:center } .ctrlbtn .current{ background:#e5007e; } #adv{ width:400px; height:300px; border:1px solid red; position:relative; } </style> </head> <body> <div id="adv"> <ul class="ctrlbtn"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script> var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]; $("#adv").adv(imgs,1000); </script> </body>

</html>

//以下为插件代码

$.fn.adv=function(imgs,timer){
var i=0;
var selector=this.selector;//this==>>adv && selector==>>#adv
img=new Image();//创建img对象
img.src=imgs[i];//指定路径
img.onload=function(){
$(selector).append(img);//在adv中显示图片
}

function lunbo(){//定义轮播
i++;
if(i>=imgs.length){
i=0;
}
img.src=imgs[i];
img.onload=function(){
$(selector).append(img);
}
$('.ctrlbtn li').eq(i).addClass('current').siblings().removeClass('current');

}
var t=setInterval(function(){lunbo()},timer);//循环播放;
$(function(){//手动停止定时器
$(selector).hover(function(){
clearInterval(t);
t=null;
},function(){
t=setInterval(function(){lunbo()},timer);
});

$('.ctrlbtn li').mouseover(function(){//手动看图
clearInterval(t);
$(this).addClass('current').siblings().removeClass('current');
var i=$('.ctrlbtn li').index(this);
img.src=imgs[i];
});

})

}

0 0