Question

我有一个代码，一个简单的自动幻灯片显示。我想放置多个幻灯片，但它们会彼此覆盖。请帮我如何解决这个问题。请帮我解决这个问题。我想在同一页面上使用这些幻灯片，但是当我尝试仅1个幻灯片时。我希望将来使用8种类型的幻灯片。还有1个，我想在图片切换时在图片之间放置一个简单的动画。 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>

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”和“图像”保持唯一，而不要在下一个脚本中重复它们。

我想从此到一页进行多个幻灯片演示

1 个答案: