创建一个幻灯片

我正在为一个动物救援的网站工作，我试图把一些动物的自动幻灯片放到收养处，但是，对于我的生活我无法获得代码上班。有什么建议么？创建一个幻灯片

<div class="photobanner" style="max-height:460px"> 
     <img class="myslides" src="image-1.jpg" style="height:100%" /> 
     <img class="myslides" src="image-2.jpg" style="height:100%" /> 
     <img class="myslides" src="image-3.jpg" style="height:100%" /> 
     <img class="myslides" src="image-4.jpg" style="height:100%" /> 
     <img class="myslides" src="image-5.jpg" style="height:100%" /> 
     <img class="myslides" src="image-6.jpg" style="height:100%" /> 
    </div> 

    <script type="text/javascript"> 
var myIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    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, 2000); // Change image every 2 seconds 
} 
</script>

来源

2017-01-01 lrdjdgmnt

对我的作品！你使用的是什么浏览器？另一个脚本是否会干扰它？ – Alan

你能否添加一些关于你所面对的确切问题的细节？ “无法让代码工作”并没有给读者提供足够的信息。 –

@Auurag我有幻灯片显示在一个div浮动旁边另一个div与溢出隐藏，如何去除'overflow：hidden;'看看这是什么问题没有发生。在这个时候，我看不到任何照片，也没有幻灯片 – lrdjdgmnt

试试这个小提琴：https://jsfiddle.net/zaedmfLs/

var myIndex = 0; 
setInterval(carousel, 2000); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("myslides"); 
    for (i = 0; i < x.length; i++) { 
     console.log("Carousel"); 
     x[i].style.display = "none"; 
    } 
    myIndex++; 

    if (myIndex > x.length) {myIndex = 1} 
    x[myIndex-1].style.display = "block"; 
}

一些改变你的代码：

使用的setInterval，而不是setTimeout的
setInterval的调用转盘方式为转盘以外的地方做需要重复调用。
有在myslides名（大写 'S'）

来源

2017-01-01 17:24:04

修复它非常感谢你 – lrdjdgmnt

一个错字你有2个主要问题：

mySlides和myslides是不一样的东西
，而不是setTimeout我会使用setInterval每2秒调用一次函数

这里有一个建议

var myIndex = 0; 
 
var images = document.getElementsByClassName("myslides"); 
 
setInterval(carousel, 2000); // Change image every 2 seconds 
 

 
function carousel() { 
 
    images[myIndex].style.display = "none"; 
 

 
    myIndex++; 
 
    if (myIndex >= images.length) { 
 
     myIndex = 0; 
 
    } 
 
    console.log(myIndex, images.length); 
 
    images[myIndex].style.display = "block"; 
 
}

img.myslides { 
 
    display: None; 
 
}

<div class="photobanner" style="max-height:460px"> 
 
     <img class="myslides" src="image-1.jpg" style="height:100%" /> 
 
     <img class="myslides" src="image-2.jpg" style="height:100%" /> 
 
     <img class="myslides" src="image-3.jpg" style="height:100%" /> 
 
     <img class="myslides" src="image-4.jpg" style="height:100%" /> 
 
     <img class="myslides" src="image-5.jpg" style="height:100%" /> 
 
     <img class="myslides" src="image-6.jpg" style="height:100%" /> 
 
    </div>

来源

2017-01-01 17:26:51 ppasler

感谢指出，我忽视了最后一个小时左右，并改变了我的原始代码的作品。 – lrdjdgmnt

创建一个幻灯片

回答

相关问题