/*
* 使用说明
*
* 1:需要提供一个标签
* 2:lis:图片的个数
* 3:轮播图的大小 width ,height
* 4:图片的地址imgs[0].carouselImg[0] 这是本人的地址,
$(‘#mainCarousel‘).jdCarousel({lis:7,width:800,height:340,
imgSrc:[
imgs[0].carouselImg[0],
imgs[0].carouselImg[1],
imgs[0].carouselImg[2],
imgs[0].carouselImg[3],
imgs[0].carouselImg[4],
imgs[0].carouselImg[5],
imgs[0].carouselImg[6]
]
});
*/
(function($){
$.fn.extend({
jdCarousel:function(options){
//ul
var obj = $(this);
$(this).append(‘<ul></ul>‘)
for(var i=0 ; i<options.lis ; i++){
$(this).children(‘ul‘).append(‘<li><a href="#"><img/></a><>‘);
}
//设置样式
$(this).css({‘overflow‘:‘hidden‘,‘position‘:‘relative‘});
$(this).children(‘ul‘).css({‘width‘:options.width,‘height‘:options.height,‘overflow‘:‘hidden‘,padding:0,‘position‘:‘relative‘});
$(this).find(‘li‘).css({‘width‘:options.width,‘height‘:options.height,‘overflow‘:‘hidden‘,padding:0,‘position‘:‘absolute‘});
$(this).find(‘li img‘).css({‘width‘:options.width,‘height‘:options.height,‘overflow‘:‘hidden‘})
//获得图片
$(this).find(‘li‘).each(function(index,ele){
$(this).find(‘img‘).attr(‘src‘,options.imgSrc[index]);
//设置第一张图片显示
if(index!=0){
$(this).hide();
}
});
//底部点点
$(this).append(‘<div class="carouselDot"></div>‘);
for(var i=0 ; i<options.lis ; i++){
$(this).children(‘.carouselDot‘).append(‘<span></span>‘);
}
$(this).children(‘.carouselDot‘).css({‘position‘:‘absolute‘,‘z-index‘:10,‘bottom‘:20,
‘left‘:(options.width - (options.lis*24 -8))/2 ,‘background-color‘:‘hsla(0,0%,100%,.3)‘,
‘padding‘:‘1px 8px‘,height:20,‘width‘:options.lis*24 +5,‘border-radius‘:‘12px‘});
$(this).children(‘.carouselDot‘).find(‘span‘).css({
‘margin‘:0,‘display‘:‘inline-block‘,‘height‘:‘12px‘,‘width‘:‘12px‘,‘margin-right‘:12,‘background‘:‘white‘,
‘border-radius‘:‘50%‘});
$(this).children(‘.carouselDot‘).find(‘span‘).eq(options.lis - 1).css(‘margin-right‘,0);
$(this).children(‘.carouselDot‘).children(‘span‘).eq(0).css(‘background‘,‘red‘);
//上下张
$(this).append(‘<span class="jdLeftPrev jdPNClick"><</span>‘);
$(this).append(‘<span class="jdRightNext jdPNClick">></span>‘);
$(this).children(‘.jdPNClick‘).css({
‘display‘:‘block‘,‘width‘:35,‘height‘:50,‘background‘:‘rgba(0,0,0,0.5)‘,‘z-index‘:100,‘position‘:‘absolute‘,
‘text-align‘:‘center‘,‘line-height‘:‘50px‘,‘top‘:(options.height - 25)/2,‘color‘:‘white‘,‘font-size‘:30
});
$(this).children(‘.jdRightNext‘).css(‘right‘,0);
$(this).children(‘.jdLeftPrev‘).css(‘left‘,0);
//轮播图运动
var last = 0;
var index = 0;
function doMove(){
obj.find(‘li‘).eq(last).hide();
obj.children(‘.carouselDot‘).children(‘span‘).eq(last).css(‘background‘,‘white‘);
obj.find(‘li‘).eq(index).show();
obj.children(‘.carouselDot‘).children(‘span‘).eq(index).css(‘background‘,‘red‘);
last = index;
index++;
if(index == options.lis){
index = 0;
}
}
var timer = null ;
timer = setInterval(doMove,1000);
//点点
// 鼠标移入事件
obj.children(‘.carouselDot‘).hover(function(){
obj.children(‘.carouselDot‘).css(‘cursor‘,‘pointer‘);
clearInterval(timer);
},function(){
timer = setInterval(doMove,1000);
});
obj.children(‘.carouselDot‘).on(‘mouseover‘,‘span‘,function(event){
// index+=1
// index = index>=options.lis?0:index;
$(this).siblings().css(‘background‘,‘white‘);
index = $(this).index();
doMove();
});
//prev next 事件
$(this).hover(function(){
$(this).children(‘.jdPNClick‘).css(‘background-color‘,‘rgba(0,0,0,0.5)‘);
},function(){
$(this).children(‘.jdPNClick‘).css(‘background-color‘,‘rgba(0,0,0,0.2)‘);
});
$(this).children(‘.jdPNClick‘).hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(doMove,1000);
});
$(this).children(‘.jdLeftPrev‘).click(jdLeftPrev);
function jdLeftPrev(){
clearInterval(timer);
last = index;
index -= 1;
index = index<0? options.lis-1:index;
obj.children(‘.carouselDot‘).children(‘span‘).eq(index).siblings().css(‘background‘,‘white‘);
obj.find(‘li‘).eq(last).hide();
obj.children(‘.carouselDot‘).children(‘span‘).eq(last).css(‘background‘,‘white‘);
obj.find(‘li‘).eq(index).show();
obj.children(‘.carouselDot‘).children(‘span‘).eq(index).css(‘background‘,‘red‘);
}
$(this).children(‘.jdRightNext‘).click(jdRightNext);
function jdRightNext(){
last = index;
index += 1;
index = index==options.lis? 0:index;
obj.find(‘li‘).eq(last).hide();
obj.children(‘.carouselDot‘).children(‘span‘).eq(index).siblings().css(‘background‘,‘white‘);
obj.children(‘.carouselDot‘).children(‘span‘).eq(last).css(‘background‘,‘white‘);
obj.find(‘li‘).eq(index).show();
obj.children(‘.carouselDot‘).children(‘span‘).eq(index).css(‘background‘,‘red‘);
}
}
})
})(jQuery)