我想制作一个简单的幻灯片,在页面加载时自动播放。到目前为止,这是我的代码:
HTML:
<div id="slideshow">
<div>
<img src="slide_1.png">
</div>
<div>
<img src="slide_2.png">
</div>
<div>
<img src="slide_3.png">
</div>
</div>
CSS:
#slideshow {
position: relative;
width: 900px;
height: 450px;
}
#slideshow > div {
position: absolute;
}
如果可能,有人可以给我提供一个 JavaScript 代码,它会自动播放幻灯片,并通过使用幻灯片切换来更改幻灯片,并在用户静止时重播无限次这一页?另外,可能是右下角有数字的导航。这是我正在寻找的示例:(http://www.http://www.suprafootwear.com/)。顶部的大幻灯片是我想要的,唯一的区别是我希望过渡是线性幻灯片运动而不是淡入淡出过渡。请保持 900px x 450px 大小。任何帮助表示赞赏。先感谢您!
最佳答案
试试这个简单的 javascript 代码来制作图像 slider 。
(function() {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function() {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
})();
.container {
position: relative;
width: 100%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}
<div id="imgGallary" class="container">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
关于javascript - 如何用javascript制作一个简单的自动播放幻灯片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21222360/