jq轮播图插件

/*
 * 使用说明 
 *   
 *   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">&lt;</span>');
$(this).append('<span class="jdRightNext jdPNClick">&gt;</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)