Question

请帮助。该div和脚本仅工作一次。我想用不同的图像将幻灯片放在一起。但是，如果我多次尝试编写此脚本，则幻灯片将无法正常运行。我尽力了。当进入只有一个年龄幻灯片的页面时，div和脚本可以正常工作，但是如果超过一个，则没有。

<div >
  <img alt="kandy" src="kandy4.jpg" style="width:1000" 
height="500" class="kandy">
  <img alt="kandy" src="kandy.jpg" style="width:1000" 
height="500" class="kandy">
  <img alt="kandy" src="kandy2.jpg" style="width:1000" 
height="500" class="kandy">
  <img alt="kandy" src="kandy3.jpg" style="width:1000" 
height="500" class="kandy">
</div>
<script>

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("kandy");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 3 
  seconds
}
</script>
<div >
  <img alt="ella" src="ella4.jpg" style="width:1000" 
height="500" class="ella">
  <img alt="ella" src="ella.jpg" style="width:1000" 
height="500" class="ella">
  <img alt="ella" src="ella2.jpg" style="width:1000" 
height="500" class="ella">
  <img alt="ella" src="ella3.jpg" style="width:1000" 
height="500" class="ella">
</div>
<script>
var myIndex = 0;
carousel();

function carousel() {
    var j;
    var y = document.getElementsByClassName("ella");
    for (j = 0; j < y.length; j++) {
       y[j].style.display = "none";  
    }
    myIndex++;
   if (myIndex > y.length) {myIndex = 1}    
    y[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 3 
seconds
}
</script>

Answer 1

我不确定我是否完全理解该问题，但也许以下内容可能有用？与原始内容相同的布局略有简化，但对style属性所做的更改不正确。

如果carousel函数接受了参数，则可以用不同的参数多次调用它-因为在以后的调用中，它将覆盖该函数的先前调用。

<div>
  <img alt="kandy" src="kandy4.jpg" width='1000px' height='500px' class="kandy">
  <img alt="kandy" src="kandy.jpg" width='1000px' height='500px' class="kandy">
  <img alt="kandy" src="kandy2.jpg" width='1000px' height='500px' class="kandy">
  <img alt="kandy" src="kandy3.jpg" width='1000px' height='500px' class="kandy">
</div>
<div>
  <img alt="ella" src="ella4.jpg" width='1000px' height='500px' class="ella">
  <img alt="ella" src="ella.jpg" width='1000px' height='500px' class="ella">
  <img alt="ella" src="ella2.jpg" width='1000px' height='500px' class="ella">
  <img alt="ella" src="ella3.jpg" width='1000px' height='500px' class="ella">
</div>

<script>
    /* pass in whatever class as an argument */
    const carousel=function( _classname, _index, _time ){
        let col=document.getElementsByClassName( _classname );
        Array.prototype.slice.call( col ).forEach(function(e){
            e.style.display='none';
        });


        if( _index > col.length - 1 ) _index=0;
        col[ _index ].style.display='block';
        console.info( col[ _index ] );

        setTimeout( function(){
            carousel.call( this, _classname, _index, _time );
        },_time * 1000 );

        _index++;
    }

    carousel('kandy',0,3);
    carousel('ella',0,3);

</script>

HTML中的多个图像滑块

1 个答案: