123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- import '../css/bootstrap.less';
- import 'bootstrap/dist/js/bootstrap.js';
- import '../css/public.css';
- import '../css/main_banner.css';
- import './public.js';
- import './main_banner.js';
- import '../css/highTechCognizance.css';
- (function(){
- var t=1;//判断现在在中间的是第几个div
- $(".pro_rotate>div>div").click(function(){
- t=$(this).attr("value")-(-1);
- $(".problem_left").children("div").eq(t).addClass("active_div").siblings().removeClass("active_div");
- $(this).parent().addClass("active").siblings().removeClass("active");
- var rotval=$(this).attr("value");
- var divval=$(".pro_rotate").attr("rota");
- var rotdiv=$(".pro_rotate>div");
- $(".pro_rotate").css({"transform":"rotate("+(divval-(-rotval*20))+"deg)"},500);
- for(var i=0;i<rotdiv.length;i++){
- var childrot=$(rotdiv[i]).children("div").attr("rota");
- $(rotdiv[i]).children("div").css({"transform":"rotate("+(childrot-(rotval*20))+"deg)"},500);
- }
- div_position();
- });
- var scrollFunc=function(e){
- if(e.target.id=="rotate_four"){
- e=e || window.event;
- if (e.stopPropagation) e.stopPropagation();
- else e.cancelBubble = true;
- if (e.preventDefault) e.preventDefault();
- else e.returnValue = false;
- var a=0;
- if(e.wheelDelta){//IE/Opera/Chrome
- a=e.wheelDelta/-120;
- }else if(e.detail){//Firefox
- a=e.detail/3;
- }
- t-=-a;
- if(t<0){
- t=0;
- }else if(t>3){
- t=3;
- }
- console.log(t);
- $(".pro_rotate>div>div").eq(t).click();
- }
- }
- /*注册事件*/
- if(document.addEventListener){
- document.addEventListener('DOMMouseScroll',scrollFunc,false);
- }//W3C
- window.onmousewheel=document.getElementById("rotate_four").onmousewheel=scrollFunc;//IE/Opera/Chrome
- function div_position(){
- //var problem_textdiv=$(".problem_left>div");
- //for(j=0;j<problem_textdiv.length;j++){
- // var div_height=$(problem_textdiv[j]).height();
- // $(problem_textdiv[j]).css({"bottom":-div_height});
- //}
- //var act_divheight=$(".problem_left>div.active_div").height();
- //$(".problem_left>div.active_div").animate({"bottom":(450-act_divheight)/2},"slow");
- $(".problem_left>div").fadeOut("fast");
- $(".problem_left>div.active_div").fadeIn("slow");
- }
- div_position();
- })();
- (function(){
- var htmlwidth=$(document).width();
- $(".btn_div>div").width((htmlwidth-1200)/2);
- $(".leftdiv").css({"left":-(htmlwidth-1200)/2});
- $(".rightdiv").css({"right":-(htmlwidth-1200)/2});
- var $imgBig=$('.ct_img_big'),
- $btnNext=$('.btn_next1'),
- $btnPre=$('.btn_pre1'),
- $CT = $('.carousel'),
- $imgSmall=$('.ct_img_small');
- var $imgWidth=$imgBig.find('li').width();//获取图片的宽度;
- var $imgLength=$imgBig.children().length;//获取克隆前的图片的长度;
- // 拷贝第一张和最后一张;把最后一张图放在最前面;把最前面的图放在最后;
- var $firstImg=$imgBig.find('li'),
- $lastImg=$imgBig.find('li');
- $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()
- })
- }
- 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()
- })
- }
- //设置小图的class
- function smallImg(){
- $imgSmall.children()
- .removeClass('active')
- .eq(pageIndex) .addClass('active')
- }
- })();
|