javascript - 我想将不止一张幻灯片从这个幻灯片放映到一页

Question

我有一个代码，一个简单的自动幻灯片。我想放置超过 1 个幻灯片，但它们会相互覆盖。请帮助我如何解决这个问题。请帮我解决这个问题。我想在同一页面上使用这些幻灯片，但是当我尝试只有 1 个幻灯片时。我想在未来使用 8 种类型的幻灯片。还有一个额外的，我想在图片切换时在图片之间放置一个简单的动画。html:

<div class="pic-wrapper">
<img name="slide" width="400" height="377" object-fit="cover"/>
</div>

和

<div class="pic-wrapper">


<img name="slide2" width="400" height="377" object-fit="cover"/>

</div>

和我的javascripts：

<script>
    var i = 0;          // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
images[0] = "img/kosar/kosar1.jpg";
images[1] = "img/kosar/kosar2.jpg";
images[2] = "img/kosar/kosar3.jpg";
images[3] = "img/kosar/kosar4.jpg";

// Change Image
function changeImg(){
    document.slide2.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 0;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;
</script>

和

<script>
    var i = 0;          // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
images[0] = "img/roplabda/ropi1.jpg";
images[1] = "img/roplabda/ropi2.jpg";
images[2] = "img/roplabda/ropi3.jpg";
images[3] = "img/roplabda/ropi4.jpg";

// Change Image
function changeImg(){
    document.slide.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 0;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;
</script>

标签： javascripthtmlslideshow

Answer 1

你为什么不把你的脚本合并成这样的东西呢？

var slide1 = 0;          // First Slide index
var slide2 = 0;  //Second Slide Index
var images = [];    // Images Array
var time = 3000;    // Time Between Switch

// Image List
imageObjects = { 'firstSlide': [
"img/roplabda/ropi1.jpg",
"img/roplabda/ropi2.jpg",
"img/roplabda/ropi3.jpg",
"img/roplabda/ropi4.jpg",
], 
'secondSlide': [
 "img/kosar/kosar1.jpg",
 "img/kosar/kosar2.jpg",
 "img/kosar/kosar3.jpg",
 "img/kosar/kosar4.jpg"
]};


// Change Image
function changeImg(){
    document.slide.src = imageObjects.firstSlide[slide1];
        document.slide2.src = imageObjects.secondSlide[slide2];
    // Check If Index Is Under Max
    if(slide1 < imageObjects.firstSlide.length - 1){
      // Add 1 to Index
      slide1++; 
    } else { 
        // Reset Back To O
        slide1 = 0;
    }
    if(slide2 < imageObjects.secondSlide.length - 1){
      // Add 1 to Index
      slide2++; 
    } else { 
        // Reset Back To O
        slide2 = 0;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;

如果您真的想为这些幻灯片保留单独的脚本，无论出于何种原因。那么你可能应该保持你的变量名“i”和“images”是唯一的，而不是在下一个脚本中重复它们。