查看: 349|回复: 2

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

[复制链接]

该用户从未签到

1

主题

4

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2021-7-12 19:45:46 | 显示全部楼层 |阅读模式
网站引用了2个swiper,JS代码放在各自模板下2个都正常,把JS代码放在JS文件引用就会互相影响
回复

使用道具 举报

该用户从未签到

1

主题

4

帖子

6

积分

新手上路

Rank: 1

积分
6
 楼主| 发表于 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[i].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',
      },
    });
        }                                       
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

4

帖子

6

积分

新手上路

Rank: 1

积分
6
 楼主| 发表于 2021-7-12 19:52:20 | 显示全部楼层
上面是2个JS放在JS文件里面的代码,网上搜了一下说调用不同的类名就不会互相影响了,可是我换了类名在调用还是有影响
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2021-11-29 11:01 , Processed in 0.062428 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表