李小龙 发表于 2021-7-12 19:45:46

网站引用了2个swiper互相影响

网站引用了2个swiper，JS代码放在各自模板下2个都正常，把JS代码放在JS文件引用就会互相影响

李小龙 发表于 2021-7-12 19:49:07

window.onload = function(){
    effect = 0
    var swiper = new Swiper('.swiper-container', {
          loop: true,
          speed: 2500,
      slidesPerView: 7,
      spaceBetween: 30,
          centeredSlides : true,
          watchSlidesProgress : true,
          on: {
          setTranslate: function(){
                        slides = this.slides
                        for(i=0; i< slides.length; i++){
                                slide = slides.eq(i)
                                progress = slides.progress
                                //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
                                  slide.css({'opacity': '','background': ''});slide.transform('');//清除样式
                                       
                                        if(effect == 1){
                                          slide.transform('scale('+(1 - Math.abs(progress)/8)+')');
                                        }else if(effect == 2){
                                                slide.css('opacity',(1-Math.abs(progress)/6));
                                          slide.transform('translate3d(0,'+ Math.abs(progress)*20+'px, 0)');
                                        }
                                        else if(effect == 3){
                                          slide.transform('rotate('+ progress*30+'deg)');
                                        }else if(effect == 4){
                                                slide.css('background','rgba('+ (255 - Math.abs(progress)*20) +','+ (127 + progress*32) +',' + Math.abs(progress)*64 + ')');
                                        }
                                       
                                }       
                },
                setTransition: function(transition) {
                        for (var i = 0; i < this.slides.length; i++) {
                                var slide = this.slides.eq(i)
                                slide.transition(transition);
                        }
                },
          },
          navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
          },
      pagination: {
      el: '.swiper-pagination',
      clickable: true,
      },
    });
       
        pe = document.getElementById('progressEffect');
        pe.onchange = function(){
          effect = this.value
                swiper.update();       
        }
        }       


window.onload = function(){
var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      },
      pagination: {
      el: '.swiper-pagination',
      clickable: true,
      },
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
      },
    });
        }                                       

李小龙 发表于 2021-7-12 19:52:20

上面是2个JS放在JS文件里面的代码，网上搜了一下说调用不同的类名就不会互相影响了，可是我换了类名在调用还是有影响
页: [1]
查看完整版本: 网站引用了2个swiper互相影响