javascript - 试图调用 2 个 JS 文件，但只有 1 个有效

问题描述

我有一个调用 2 个 JS 文件的 HTML 页面（网站上 1 个页面的不同部分上有 2 个图像滑块，有 2 组不同的图像）。我的问题是只有 1 个滑块在工作，而另一个不工作。您是否不允许在 1 个 HTML 文档上调用 2 个不同的 JS 文件？另一个奇怪的事情是，我将 2 个图像滑块分成 2 个不同的 HTML 文档，并调用了它们各自的 JS 文件，它们都可以工作，但是当它们在同一页面上时就不行了。对不起，我对这一切都不熟悉。

HTML

<video src="./pics/acecs2.mp4" muted loop autoplay controls></video>


      </section>
      <div class="bowl-container">
      <div class="slider-wrap">
        <div class="slider">
          <div class="slider-item">
            <div class="img-div"></div>
          </div>
          <div class="slider-item">
            <div class="img-div"></div>
          </div>
          <div class="slider-item">
            <div class="img-div"></div>
          </div>
          <div class="slider-item">
            <div class="img-div"></div>
          </div>
          <div class="slider-item">
            <div class="img-div"></div>
          </div>
        </div>
      </div>
    </div>





    <section class="showcase2">


      <video src="./pics/ace3.mp4" muted loop autoplay controls></video>


    </section>
    <div class="bowl-container2">
    <div class="slider-wrap2">
      <div class="slider2">
        <div class="slider-item2">
          <div class="img-div2"></div>
        </div>
        <div class="slider-item2">
          <div class="img-div2"></div>
        </div>
        <div class="slider-item2">
          <div class="img-div2"></div>
        </div>
        <div class="slider-item2">
          <div class="img-div2"></div>
        </div>
        <div class="slider-item2">
          <div class="img-div2"></div>
        </div>
      </div>
    </div>
  </div>



      <script src="app.js"></script>
      <script src="app2.js"></script>

应用程序.js

let sliderWrap = document.querySelector('.slider-wrap');
let slider = document.querySelector('.slider');
let clonesWidth;
let sliderWidth;
let clones = [];
let scrollPos = 1
let sliderHover = false;
let req;1
let items = [...document.querySelectorAll('.slider-item')];
let images = [...document.querySelectorAll('.img-div')];


images.forEach((image, idx) => {
    image.style.backgroundImage = `url(./pics2/${idx+1}.jpg)`
})

items.forEach(item => {
    let clone = item.cloneNode(true);
    clone.classList.add('clone');
    slider.appendChild(clone);
    clones.push(clone);
})

sliderWrap.addEventListener('mouseover', () =>{
    sliderHover = true;
})

sliderWrap.addEventListener('mouseleave', () =>{
    sliderHover = false;
})

function getClonesWidth(){
    let width = 0;
    clones.forEach(clone => {
        width += clone.offsetWidth;
    })
    return width;
}


function scrollUpdate(){
    if(window.innerWidth > 760){
        sliderWrap.style.overflow = 'hidden';
        if(!sliderHover){
            scrollPos -= .4
        }

        if(clonesWidth + scrollPos >= sliderWidth){
            
            scrollPos = 1;
        }else if(scrollPos <= 0){
            
            scrollPos = sliderWidth - clonesWidth - 1
        }
        slider.style.transform = `translateX(${-scrollPos}px)`

        req = requestAnimationFrame(scrollUpdate)
    }else{
        sliderWrap.style.overflow = 'scroll';
    }

}


function onLoad(){

    calaculateDimensions()
    scrollPos = 1;
    scrollUpdate();
}

function calaculateDimensions(){

    sliderWidth = slider.getBoundingClientRect().width;
    clonesWidth = getClonesWidth();
}

onLoad();

app2.js

let sliderWrap2 = document.querySelector('.slider-wrap2');
let slider2 = document.querySelector('.slider2');
let clonesWidth2;
let sliderWidth2;
let clones2 = [];
let scrollPos2 =1
let sliderHover2 = false;
let req2; // request animation frame reference
let items2 = [...document.querySelectorAll('.slider-item2')];
let images2 = [...document.querySelectorAll('.img-div2')];


images2.forEach((image, idx) => {
    image.style.backgroundImage = `url(./pics3/${idx+1}.jpg)`
})

items2.forEach(item => {
    let clone = item.cloneNode(true);
    clone.classList.add('clone');
    slider2.appendChild(clone);
    clones2.push(clone);
})

sliderWrap2.addEventListener('mouseover', () =>{
    sliderHover2 = true;
})

sliderWrap2.addEventListener('mouseleave', () =>{
    sliderHover2 = false;
})

function getClonesWidth(){
    let width = 0;
    clones2.forEach(clone => {
        width += clone.offsetWidth;
    })
    return width;
}


function scrollUpdate(){
    if(window.innerWidth > 760){
        sliderWrap2.style.overflow = 'hidden';
        if(!sliderHover2){
            scrollPos2 -= .15
        }

        if(clonesWidth2 + scrollPos2 >= sliderWidth2){
            
            scrollPos2 = 1;
        }else if(scrollPos2 <= 0){
            
            scrollPos2 = sliderWidth2 - clonesWidth2 - 1
        }
        slider2.style.transform = `translateX(${-scrollPos2}px)`

        req2 = requestAnimationFrame(scrollUpdate)
    }else{
        sliderWrap2.style.overflow = 'scroll';
    }

}


function onLoad(){

    calaculateDimensions()
    scrollPos2 = 1;
    scrollUpdate();
}

function calaculateDimensions(){

    sliderWidth2 = slider2.getBoundingClientRect().width;
    clonesWidth2 = getClonesWidth();
}

onLoad()

标签： javascripthtmlcss

javascript - 试图调用 2 个 JS 文件，但只有 1 个有效

问题描述

解决方案

推荐阅读