这是我制作的jquery插件代码
;(function($){
$.fn.extend({
banner:function(options){
this.each(function(){
var images=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];
var i=0;
var def={
imgarr:images,
fadeTime:800,
timeOut:2000
}
var opt=$.extend(def, options);
function change(n){
//得到图片更改路径
$('#img').fadeOut(0).attr('src','img/'+opt.imgarr[n]).fadeIn(opt.fadeTime);
$('#banner .choose').removeClass('choose');
$('#banner li').eq(n).addClass('choose');
}
function changeSelf(){
//自增
i++;
if(i>=opt.imgarr.length){
i=0;
}
//更换图片,动画,li的样式
change(i);
}
t=setInterval(function(){
changeSelf()
},opt.timeOut);
//span悬浮事件
$('#banner').hover(function(){
clearInterval(t)
$(this).children('span').css('opacity',0.6);
},function(){
$(this).children('span').css('opacity',0.2);
t=setInterval(function(){
changeSelf()
},opt.timeOut);
})
//span点击事件
$('#banner span').click(function(){
if($(this).hasClass('left')){
i--;
//判断
if(i<0){
i=opt.imgarr.length-1;
}
//上一张
change(i);
}else{
//下一张
i++;
//判断
if(i>=opt.imgarr.length){
i=0;
}
//上一张
change(i);
}
})
//li的悬浮事件
$('#banner li').mouseover(function(){
//当前li
var index=$(this).index();
//将全局i换成index
i=index;
$('#img').stop();
//更改样式
change(index);
})
})
}
})
})(jQuery);
下面是html代码
//
$(function(){
$('.b1').banner();
})
$(function(){
$('.b2').banner();
})
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
你两个轮播图都用id="banner",然后还用$('#banner')作为选择器,不冲突才怪