|
@@ -23,58 +23,111 @@ $(function(){
|
|
|
}
|
|
|
$('.need_imgs ul').animate({'marginLeft':-(liwit+20)*k},1000)
|
|
|
});
|
|
|
- //首页轮播
|
|
|
- $('.index_tt .banner_txt').eq(0).show().siblings().hide();
|
|
|
- var $ct=$('.banner_box ul'),
|
|
|
- $items=$ct.children(),
|
|
|
- $pre=$('.index_pre'),
|
|
|
- $next=$('.banner_next'),
|
|
|
- imgCount=$items.length,
|
|
|
- imgWidth=$items.width();
|
|
|
- $ct.append($items.first().clone());
|
|
|
- $ct.prepend($items.last().clone());
|
|
|
- var newCount=$ct.children().length;
|
|
|
- $ct.css({marginLeft:0-imgWidth,width:newCount*imgWidth});
|
|
|
- $next.on('click',function(){
|
|
|
- playnext();
|
|
|
- })
|
|
|
- $pre.on('click',function(){
|
|
|
- playpre();
|
|
|
- })
|
|
|
- var curidx =0;
|
|
|
- var mov = 1;
|
|
|
- function playnext(){
|
|
|
- $ct.animate({marginLeft:'-='+mov*imgWidth},1000,function(){
|
|
|
- curidx+=mov;
|
|
|
- if(curidx===imgCount){
|
|
|
- $ct.css({marginLeft:0-imgWidth});
|
|
|
- curidx=0;
|
|
|
- }
|
|
|
+ //首页轮播图
|
|
|
+ (function(){
|
|
|
+ var $imgBig=$('.ct-img-big'),
|
|
|
+ $btnNext=$('.btn-next'),
|
|
|
+ $btnPre=$('.btn-pre'),
|
|
|
+ $CT = $('.carousel_top'),
|
|
|
+ $imgSmall=$('.ct-img-small');
|
|
|
+ var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
|
|
|
+ var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
|
|
|
+// 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
|
|
|
+ var $firstImg=$imgBig.find('li').first(),
|
|
|
+ $lastImg=$imgBig.find('li').last();
|
|
|
+ $imgBig.prepend($lastImg.clone());
|
|
|
+ $imgBig.append($firstImg.clone()); //设置imgBig clone后的宽度
|
|
|
+ $imgBig.width( $imgWidth*$imgBig.children().length)//这时的个数是添加完以后的个数
|
|
|
+ $imgBig.css({'left':'-='+$imgWidth+'px'})//把第一张图放入可视区
|
|
|
+ var pageIndex = 0 ; //img的下标;
|
|
|
+ var isAnimate = false;//防止重复点击 上锁
|
|
|
+
|
|
|
+ $btnNext.on('click',function(e){
|
|
|
+ e.preventDefault();
|
|
|
+ playNext()
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+
|
|
|
+ },1500)
|
|
|
+ });
|
|
|
+ $btnPre.on('click',function(e){
|
|
|
+ e.preventDefault();
|
|
|
+ playPre()
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+
|
|
|
+ },1500)
|
|
|
+ });
|
|
|
+
|
|
|
+ $imgSmall.find('li').on('click',function(){
|
|
|
+ var smallIdx= $(this).index();
|
|
|
+ if(smallIdx>pageIndex){
|
|
|
+ playNext(smallIdx-pageIndex);
|
|
|
+
|
|
|
+ }
|
|
|
+ else if(smallIdx<pageIndex){
|
|
|
+ playPre(pageIndex-smallIdx);
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ function playNext(n){
|
|
|
+ var idx = n ||1;
|
|
|
+ if(isAnimate) return;
|
|
|
+ isAnimate = true;
|
|
|
+ $imgBig.animate({'left':'-='+ $imgWidth*idx+'px'},function(){
|
|
|
+ //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;
|
|
|
+ pageIndex = pageIndex+idx;
|
|
|
+ if( pageIndex ===$imgLength ){
|
|
|
+ $imgBig.css({'left':'-'+$imgWidth+'px'})
|
|
|
+ pageIndex = 0;
|
|
|
+ }
|
|
|
+ isAnimate = false;
|
|
|
+ smallImg()
|
|
|
})
|
|
|
- $('.index_tt .banner_txt').eq(curidx).show().siblings().hide();
|
|
|
- }
|
|
|
- function playpre(){
|
|
|
- $ct.animate({marginLeft:'+='+mov*imgWidth},1000,function(){
|
|
|
- curidx-=mov;
|
|
|
- if(curidx<0){
|
|
|
- $ct.css({marginLeft:0-imgWidth*imgCount});
|
|
|
- curidx=imgCount-1;
|
|
|
- }
|
|
|
+ }
|
|
|
+ function playPre(n){
|
|
|
+ var idx = n ||1;
|
|
|
+ if(isAnimate) return;
|
|
|
+ isAnimate = true;
|
|
|
+ $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},function(){
|
|
|
+ pageIndex=pageIndex-idx;
|
|
|
+ if(pageIndex<0){
|
|
|
+ $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});
|
|
|
+ pageIndex = $imgLength-1;
|
|
|
+ }
|
|
|
+ isAnimate = false;
|
|
|
+ smallImg()
|
|
|
})
|
|
|
- $('.index_tt .banner_txt').eq(curidx).show().siblings().hide();
|
|
|
}
|
|
|
-
|
|
|
- var timer=setInterval(playnext,3000)
|
|
|
- $('.banner').mouseenter(function(){
|
|
|
- clearInterval(timer)
|
|
|
- })
|
|
|
- $('.banner').mouseleave(function(){
|
|
|
- timer=setInterval(playnext,3000)
|
|
|
- })
|
|
|
- $('.img_list ol li').hover(function(){
|
|
|
- var simg = $(this).children('img').attr('src')
|
|
|
- $('.banner_box ul li').eq(curidx+1).find('img').attr('src',simg)
|
|
|
- })
|
|
|
+//设置小图的class
|
|
|
+ function smallImg(){
|
|
|
+ $imgSmall.children()
|
|
|
+ .removeClass('active')
|
|
|
+ .eq(pageIndex) .addClass('active');
|
|
|
+ $(".banner_all span").removeClass("text-block").eq(pageIndex).addClass("text-block");
|
|
|
+ }
|
|
|
+//自动轮播 鼠标进入鼠标离开
|
|
|
+ var timer =setInterval(function(){
|
|
|
+ playNext();
|
|
|
+
|
|
|
+ },2000);
|
|
|
+ $CT.hover(function(){
|
|
|
+ clearInterval(timer)
|
|
|
+ },function(){
|
|
|
+ timer =setInterval( function(){
|
|
|
+ playNext();
|
|
|
+
|
|
|
+ },2000)
|
|
|
+ });
|
|
|
+ $imgSmall.hover(function(){
|
|
|
+ clearInterval(timer)
|
|
|
+ },function(){
|
|
|
+ timer =setInterval( function(){
|
|
|
+ playNext();
|
|
|
+
|
|
|
+ },2000)
|
|
|
+ });
|
|
|
+ })();
|
|
|
});
|
|
|
|
|
|
|