| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 | import '../css/bootstrap.less';import 'bootstrap/dist/js/bootstrap.js';import '../css/public.css'; import '../css/index_home.css';import './public.js';//import './main_banner.js';$(function(){	var k=0;	var liwit=$('.index_cont div').width();	var lilengths=$('.index_cont>div').length;	$('.man_right').click(function(){		k++;		if(k>lilengths-3){										k=lilengths-3		}			$('.index_cont').animate({'marginLeft':-(liwit+63)*k},500)					});	$('.man_left').click(function(){		k--;		if(k<0){			k=0		}		$('.index_cont').animate({'marginLeft':-(liwit+63)*k},500)	});	//精品成果鼠标经过效果	$('.content .cont').hover(function(){		var a_href=$(this).children("a").attr("href");		$('.con_hover').show().children("a").attr("href",a_href);		var lent=$(this).index()-1;		var wid=$(this).width()+10;			if(lent%2===0){			$('.con_hover').css({top:"-36px"})		}else{			$('.con_hover').css({top:"15px"})		}		$('.con_hover').animate({left:lent*wid},50)	})	$('.content').mouseleave(function(){		$('.con_hover').hide();		$('.content .cont').stop(true)	})		//轮播图的开始    var img_length=$(".ct-img-big").children("li").length-2;    console.log(img_length);    var smallhtml="";    for(var i=1;i<=img_length;i++){        smallhtml+="<li></li>"    }    $(".ct-img-small").html(smallhtml);    var ctwidth=$('.ct-img-small').width();       $('.ct-img-small').css({marginLeft:-ctwidth/2});    $(".ct-img-small").children().eq(0).addClass("active");    var $imgBig=$('.ct-img-big'),        $btnNext=$('.btn-next'),        $btnPre=$('.btn-pre'),        $CT = $('.carouselt'),        $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.css("width", $imgWidth*$imgBig.children().length+"px")//这时的个数是添加完以后的个数    console.log($imgBig.width());    $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'},1500,function(){            //如果页数=图片的最后一个,就让图片回到第一张;即data-index=0;            pageIndex = pageIndex+idx;            if( pageIndex ===$imgLength ){                $imgBig.css({'left':'-'+$imgWidth+'px'})                pageIndex = 0;            }            isAnimate = false;            smallImg()        })    }    function playPre(n){        var idx = n ||1;        if(isAnimate) return;        isAnimate = true;        $imgBig.animate({'left':'+='+$imgWidth*idx+'px'},1500,function(){            pageIndex=pageIndex-idx;            if(pageIndex<0){                $imgBig.css({'left':'-'+$imgWidth*$imgLength+'px'});                pageIndex = $imgLength-1;            }            isAnimate = false;            smallImg()        })    }    //设置小图的class    function smallImg(){        $imgSmall.children()            .removeClass('active')            .eq(pageIndex) .addClass('active')    }    //自动轮播 鼠标进入鼠标离开    var timer =setInterval(function(){        playNext()    },3000);    $CT.hover(function(){        clearInterval(timer)    },function(){        timer =setInterval( function(){            playNext()        },3000)    });});
 |