https://www.shannan.gov.cn/images/common.js

1// 18.1.3版本更新
2//头条+banner轮播+专题自动播放
3/*
4 * 所有拓展组件，在同个页面引用时，其按钮等等选择器class 不能相同，否则将会冲突
5 *
6 * */
7(function($){
8  //所有 class均为jquery选择器
9  //切换
10  /*
11   * option参数说明：没有特殊说明类型则为string
12   * text:切换文本的class，如果没有则不填写
13   * prev 切换btn class，如果没有则不填写
14   * next 切换btn class ，如果没有则不填写
15   * num  通过num切换，如果没有则不填写，num的length必须与切换对象length相同
16   * className 当前选中num的className(不是选择器)，默认:cur
17   * callback 类型：function 每次切换完成调用，如果没有则不填写
18   * index 类型：number 切换开始位置
19   * time  类型 number  切换过渡时间，默认：300;
20   * autoPlay 类型 boolean 是否轮播,默认:true；
21   * playTime 类型 number 自动播放时间，默认:4000,
22   * direction 自动播放的顺序  默认：next
23   * type 切换方向top或left,默认：left
24   * space 类型：number 切换item中的间距 默认：0
25   * indy动态数字变化
26   * lendy 总长度
27   * */
28  function simpleSwitch(option){
29    var $banner=option._this,
30      $text=option.text?$(option.text):null,
31      $prev=option.prev?$(option.prev):null,
32      $next=option.next?$(option.next):null,
33      $num=option.num?$(option.num):null,
34      $indy=option.indy?$(option.indy):null,
35      $lendy=option.lendy?$(option.lendy):null,
36      callBack=option.callback;
37    var len=$banner.length,
38      index=option.index||0,
39      time=option.time||300,
40      playTime=option.playTime||4000,
41      type=option.type||'left',
42      direction=option.direction||'next',
43      autoPlay=option.autoPlay==undefined||option.autoPlay==true?true:false,
44      className=option.className||'cur';
45    type=type=='top'?'top':'left';
46    var pw=type=='top'?$banner.parent().height():$banner.parent().width(),
47      cw=type=='top'?$banner.height():$banner.width();
48    option.space=option.space||0;
49    cw+=option.space;
50    var css={};
51    if(cw*len<=pw)return;
52    init();
53    function init(){
54      if($lendy){
55        $lendy.text(len);
56      }
57      $banner.each(function(){
58        var _i=$(this).index();
59        $(this).show();
60        css[type]=(_i-index)*cw;
61        $(this).css(css);
62      });
63      if($num){
64        $num.eq(index).addClass(className).siblings().removeClass(className);
65      };
66      if($indy){
67        $indy.text(index+1);
68      }
69      if($text){
70        $text.eq(index).show(0).siblings().hide();
71      }
72    }
73    function nextMove(){
74      if(!$banner.is(":visible"))return;
75      for(var i=0;i<len;i++){
76        var $item=$banner.eq(i);
77        if($item.position()[type]<=-cw){
78          var perLeft=0;
79          if(i==0){
80            perLeft=$banner.eq(len-1).position()[type];
81          }else{
82            perLeft=$banner.eq(i-1).position()[type];
83          }
84          css[type]=perLeft+cw;
85          $item.css(css);
86        }
87        var nowLeft=$item.position()[type];
88        css[type]=nowLeft-cw;
89        $item.animate(css,time)
90      }
91    }
92    function prevMove(){
93      if(!$banner.is(":visible"))return;
94      for(var i=0;i<len;i++){
95        var $item=$banner.eq(i);
96          
97        if($item.position()[type]>=pw){
98          var perLeft=0;
99          if(i==len-1){
100            perLeft=$banner.eq(0).position()[type];
101          }else{
102            perLeft=$banner.eq(i+1).position()[type];
103          }
104          css[type]=perLeft-cw;
105          $item.css(css);
106        }
107        var nowLeft=$item.position()[type];
108        console.log(nowLeft)
109        css[type]=nowLeft+cw;
110        $item.animate(css,time)
111      }
112    }
113    function bannerPlay(){
114      if($banner.is(":animated")) return;
115      index++;
116      index=index>=len?0:index;
117      if(direction=='next'){
118        nextMove();
119      }else{
120        prevMove();
121      }
122      toNextShow();
123    }
124    if(autoPlay){
125      var play=setInterval(bannerPlay,playTime);
126    };
127    function toNextShow(){
128      if($num){
129        if(direction=='next'){
130          $num.eq(index).addClass(className).siblings().removeClass(className); 
131        }else{
132          $num.eq(len-index).addClass(className).siblings().removeClass(className); 
133        }
134      };
135      if($text){
136        if(direction=='next'){
137          $text.eq(index).show(0).siblings().hide();
138        }else{
139          $text.eq(len-index).show(0).siblings().hide();
140        }
141      }
142      if($indy){
143        if(direction=='next'){
144          $indy.text(index+1);
145        }else{
146          $indy.text(len-index+1);
147        }
148        
149      }
150      if(!autoPlay)return;
151      clearInterval(play);
152      play=null;
153      play=setInterval(bannerPlay,playTime);
154      if(callBack)callBack();
155    }
156    if($next){
157     
158      $next.click(function(){
159        if($banner.is(":animated")) return;
160        index--;
161        index=index<0?len-1:index;
162        // 12.10修改
163        prevMove();
164        toNextShow();
165      })
166    }
167    if($prev){
168      $prev.click(function(){
169        if($banner.is(":animated")) return;
170        index++;
171        index=index>=len?0:index;
172        // 12.10修改
173        nextMove();
174        toNextShow();
175      })
176    }
177    if($num){
178      $num.mouseenter(function(){
179        if($banner.is(":animated"))return;
180        var nextIndex=$num.index($(this));
181        $banner.each(function(){
182          var _i=$(this).index();
183          $(this).show();
184          css[type]=(_i-index)*cw;
185          $(this).css(css);
186        });
187        for(var i=0;i<len;i++){
188          var $item=$banner.eq(i);
189          var nowLeft=$item.position()[type];
190          css[type]=nowLeft+-cw*(nextIndex-index);
191          $item.animate(css,time)
192        }
193        index=nextIndex;
194        toNextShow();
195      })
196    }
197  }
198
199  // 淡入淡出切换
200  /*
201   * 参数配置如上
202   * */
203  function SwitchFade(option){
204    var $banner=option._this,
205      $text=option.text?$(option.text):null,
206      $num=option.num?$(option.num):null,
207      $indy = option.indy?$(option.indy):null,
208      $lendy = option.lendy?$(option.lendy):null,
209      index=option.index||0,
210      len=$banner.length,
211      time=option.time||300,
212      playTime=option.playTime||4000,

213      className=option.className||'cur';
214    $banner.hide();
215    $banner.eq(index).show();
216    SwitchTransform();
217    function SwitchTransform(){
218      $banner.stop().eq(index).fadeIn(time).siblings().fadeOut(time);
219      $num.eq(index).addClass(className).siblings().removeClass(className);
220      $text.eq(index).show().siblings().hide();
221      if($indy){
222        $lendy.text(len);
223        $indy.text(index+1);
224      }
225    }
226    function SwitchPlay(){
227      if($banner.is(":animated")) return;
228      index++;
229      index=index>=len?0:index;
230      SwitchTransform();
231    }
232    var play=setInterval(SwitchPlay,playTime);
233    $num.hover(function(){
234      clearInterval(play);
235      play=null;
236      index=$num.index($(this));
237      SwitchTransform();
238    },function(){
239      play=setInterval(SwitchPlay,playTime);
240    });
241    if(option.prev){
242      var $left=$(option.prev);
243      $left.click(function(){
244        index--;
245        index=index<0?len-1:index;
246        SwitchTransform();
247        clearInterval(play);
248        play=null;
249        play=setInterval(SwitchPlay,playTime);
250      })
251    }
252    if(option.next){
253      var $next=$(option.next);
254      $next.click(function(){
255        index++;
256        index=index>=len?0:index;
257        SwitchTransform();
258        clearInterval(play);
259        play=null;
260        play=setInterval(SwitchPlay,playTime);
261      })
262    }
263  }
264
265  //滚动
266  /*
267   * option={
268   * type: 方向 top或 left 默认 left
269   * space：间距 默认 15（可以是负数，最好设置一下）
270   * next、prev左右切换按钮
271   * direction   prev或者next 默认 next，就是设置开始的时候是向左或者向右
272   * time 滚动时间 默认25,时间越大滚动越慢
273   *
274   * }
275   * */
276  function simpleRoll(option){
277      function RollNext(){
278        // console.log(Width)
279        for(var i=0;i<len;i++){
280          var $item=$photo.eq(i);
281          if($item.position()[type]<=-Width){
282            var perLeft=0;
283            if(i==0){
284              perLeft=$photo.eq(len-1).position()[type];
285            }else{
286              perLeft=$photo.eq(i-1).position()[type];
287            }
288            var _css={};
289            if(type=='left'){
290              _css[type]=perLeft+cw;
291            }else{
292              _css[type]=perLeft+Width;
293            }
294            $item.css(_css)
295          }
296          var nowLeft=$item.position()[type];
297          (function($item,nowLeft){
298            setTimeout(function(){
299              var _css={};
300              _css[type]=nowLeft-1;
301              $item.css(_css)
302            },5)
303          })($item,nowLeft)
304        }
305      }
306      function RollPrev(){
307        for(var i=0;i<len;i++){
308          var $item=$photo.eq(i);
309          // console.log(Width)
310          if($item.position()[type]>=Width){
311            var perLeft=0;
312            if(i==len-1){
313              perLeft=$photo.eq(0).position()[type];
314            }else{
315              perLeft=$photo.eq(i+1).position()[type];
316            }
317            var _css={};
318            if(type=='left'){
319              _css[type]=perLeft-cw;
320            }else{
321              _css[type]=perLeft-Width;
322            }
323            $item.css(_css);
324          }
325          // 12.13修改
326          var nowLeft=$item.position()[type];
327          (function($item,nowLeft){
328            setTimeout(function(){
329              var _css={};
330              _css[type]=nowLeft+1;
331              $item.css(_css)
332            },5)
333          })($item,nowLeft)
334        }
335      }
336      function playtmFun(){
337        play= setInterval(playFun,time);
338      }
339      var $photo=option._this,
340        direction=option.direction||'next',
341        $next = option.next ? $(option.next) : null,
342        $prev = option.prev ? $(option.prev) : null,
343        $parent=$photo.parent(),
344        len=$photo.length,
345        space=option.space||15,
346        cw=$photo.width()+space,
347        play=null,
348        playFun=null,
349        time=option.time||25,
350        type=option.type=='top'?"top":"left";
351        // $photo.height()注意这个是$parent.height()还是下面这个
352      var Width=type=='top'?$photo.height():$parent.width();
353      $photo.each(function(){
354        var index=$(this).index();
355        var _css={};
356        if(type=='left'){
357          _css[type]=index*cw;
358        }else{
359          _css[type]=index*Width;
360        }
361        $(this).css(_css)
362      });
363      if(cw*len<=Width)return $photo;
364      if(direction=='next'){
365        playFun=RollNext
366      }else{
367        playFun=RollPrev
368      }
369      // 12.13修改
370      playtmFun()
371     if($prev){
372      $prev.click(function(){
373        clearInterval(play);
374        playFun=RollNext;
375        playtmFun()
376      });
377     }
378      if($next){
379        $next.click(function(){
380          clearInterval(play);
381          playFun=RollPrev;
382          playtmFun()
383        });
384      }
385      $photo.hover(function(){
386        clearInterval(play);
387        play=null
388      },function(){
389        play= setInterval(playFun,time);
390      })
391    }
392
393
394//多张图片左右滚动（每次只滚动一张）
395  /*
396   * option={
397   * len 显示几个的数量
398   * type: 方向 right 或 left 默认 left
399   * space：间距 默认 15
400   * prev next 左右按钮
401   * 
402   *
403    aniTime:默认500,//过渡时间
404    moveTime:默认3000//间隔滑动时间

405   * 
406   *
407   * }
408   * */
409  function bannerRollLR(option){ 
410      var len = option.len || banBox.children().length,//显示几个的数量
411          aniTime = option.aniTime || 500,//过渡时间
412          moveTime = option.moveTime || 3000,//间隔滑动时间
413          banBox = option._this,//移动的容器
414
415          type = option.type || 'left',
416          banBtnL = option.prev ? $(option.prev) : null,//左按钮
417          banBtnR = option.next ? $(option.next) :null;//右按钮
418          // banBtnL.show();
419          // banBtnR.show();
420      var i=0,
421          cloneArr = [];
422          // moveM = (banBox.parent().width())/len;
423          banBox.each(function(){
424              for(var i = 0;i < len;i++){
425                cloneArr.push(banBox.children().eq(i).clone());
426              }
427          }) 
428          for(var j = 0;j<cloneArr.length;j++){
429            banBox.append(cloneArr[j]);
430          }
431          var sizeChild = banBox.children().length;
432          var moveM = banBox.children().outerWidth(true);//获取内外边距
433          banBox.css({width:sizeChild*moveM*1.2})
434          function movel(){
435            if(banBox.is(":animated")) return;
436              i++;
437              if(i==sizeChild-(len-1)){
438                  banBox.css({left:0});
439                  i=1;
440              }
441              banBox.stop().animate({left:-i*moveM},aniTime)
442          }
443          function mover(){
444            if(banBox.is(":animated")) return;
445              i--;
446              if(i==-1){
447              banBox.css({left:-(sizeChild-len)*moveM});
448                  i=sizeChild-(len+1);
449              }
450            banBox.stop().animate({left:-i*moveM},aniTime)
451          }
452          // 左按钮
453          // 添加三个变量12.10
454          var tmr;
455          var tml;
456          var t ;
457          var bj;
458          if(type=='left'){
459            bj = false;
460          }else{
461            bj=true;
462          }
463          if(banBtnL){
464            banBtnL.click(function(){
465                clearInterval(t);
466                clearInterval(tmr);
467                clearInterval(tml);
468                movel(); 
469                tml = setInterval(movel,moveTime);
470                bj = false;
471            });  
472          }  
473          // 右按钮
474          if(banBtnR){
475            banBtnR.click(function(){
476                clearInterval(t);
477                clearInterval(tml);
478                clearInterval(tmr);
479                mover();
480                tmr = setInterval(mover,moveTime);
481                bj = true;
482            })
483          }
484          // 定时器
485         if(type == 'left'){
486           t = setInterval(movel,moveTime);
487         }else{
488            t = setInterval(mover,moveTime);
489         }
490          // 对banner定时器的操作
491          banBox.parent().hover(function(){
492              clearInterval(t);
493              clearInterval(tml);
494              clearInterval(tmr);
495          },function(){
496              if(bj==false){
497                t = setInterval(movel,moveTime);
498              }else{
499                t = setInterval(mover,moveTime);
500              }
501          })  
502
503  }
504
505  
506    /*
507    * tab切换
508    *jQuery(".news-tab-header li").tabPanelFun({
509      cur:'cur',   鼠标经过选项添加的类
510      tabContent:'.news-tab-lists', tab切换内容的最外层容器，是news-tab-header的兄弟元素
511      tabItem:'.news-tab-item'   tab切换内容里的子元素（即要切换内容）
512      pra：默认false，如果tab的选项按钮是多层次的就选ture
513      pradom 深层次的最父级元素
514      evnets 点击事件或者其他事件evnets:'click'，默认mouseenter
515    })
516    *
517    * 
518   */
519  function tabPanelFun(option){
520    var $panel=option._this,
521        cur = option.cur?option.cur:null,
522        pra = option.pra?option.pra:false,
523        pradom = option.pradom?option.pradom:null,
524        tabContent = option.tabContent?option.tabContent:null,
525        tabItem = option.tabItem?option.tabItem:null;
526        evnets = option.evnets?option.evnets:'mouseenter';
527
528      // $panel.mouseenter();
529      $panel.on(evnets,function(){
530      var index=$(this).parent().children($panel.selector).index(this);
531      if(pra==true){
532        jQuery(this).parents(pradom).siblings(tabContent).children(tabItem).eq(index).show().siblings().hide();
533      }else{
534        jQuery(this).parent().siblings(tabContent).children(tabItem).eq(index).show().siblings().hide();
535      }
536      jQuery(this).addClass(cur).siblings($panel.selector).removeClass(cur);
537    })
538  }
539  /**
540   * [dropDownFun description]
541   * tagSiblings:.drop-down .tag的兄弟元素
542   * optionItem：下拉子选项

543   * optionBool:是否是获取当前元素的值给.tag元素，默认是fasle（默认）当前元素，true是子元素
544   * cur:当前添加的样式,不传递默认为空
545   * @return {[type]}        [description]
546   */
547  function dropDownFun(option){
548    var $label=option._this,
549    cur = option.cur?option.cur:'',
550    $tagSiblings = option.tagSiblings,
551    $optionBool = option.optionBool?option.optionBool:false,
552    $optionItem=option.optionItem;
553    $label.each(function(){
554      $(this).on('click',function(e){
555        var e=e||window.event;
556        if(e.stopPropagation){
557          e.stopPropagation()
558        }else{
559          e.cancelBubble=true
560        }
561        var index= $label.index($(this));
562        $(this).stop().toggleClass(cur).siblings($tagSiblings).slideToggle();
563        for(var i=0,max=$label.length;i<max;i++){
564          if(index!=i)$label.eq(i).stop().removeClass(cur).siblings($tagSiblings).slideUp();
565        }
566      });
567    });
568    $(document).on('click',$optionItem,function(){
569      // 注意是获

569取当前元素还是子元素
570      var text= $optionBool==false ? $(this).children().text(): $(this).text();
571      $(this).parents($tagSiblings).siblings($label).text(text);
572    });
573    $(document).on('click',function(){
574      $label.stop().removeClass(cur).siblings($tagSiblings).slideUp();
575    });
576  }
577
578  $.fn.extend({
579    SwitchFade:function(option){
580      var  option=option ||{};
581      option._this=$(this);
582      SwitchFade(option)
583    },
584    simpleSwitch:function(option){
585      var  option=option ||{};
586      option._this=$(this);
587      // console.log(this)
588      simpleSwitch(option);
589    },
590    simpleRoll:function(optioin){
591      var  option=optioin ||{};
592      option._this=$(this);
593      simpleRoll(option)
594    },
595    bannerRollLR:function(optioin){
596      var  option=optioin ||{};
597      option._this=$(this);
598      bannerRollLR(option)
599    },
600    tabPanelFun:function(optioin){
601      var  option=optioin ||{};
602      option._this=$(this);
603      tabPanelFun(option)
604    },
605    dropDownFun:function(optioin){
606      var  option=optioin ||{};
607      option._this=$(this);
608      dropDownFun(option)
609    }
610  });
611})(jQuery);
612
613if(typeof exports ==="object"){module.exports=jQuery;}