如何使一个简单的自动播放幻灯片与javascript？ [英] How to make a simple auto playing slide show with javascript?
问题描述
我想制作一个简单的幻灯片，在网页加载时自动播放。这是我的代码到目前为止：
I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:
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/ ）。大幻灯片向上是我想要的，唯一的区别是，我想要转换为线性幻灯片运动，而不是褪色转换。请保持900像素x 450像素的尺寸。任何帮助是赞赏。先谢谢你！
If possible, can someone please provide me with a JavaScript code that will automatically play the slide show, as well as change the slides by using a slide transition, and also have it replay infinite amount of times while the user is still of the page? Also, maybe a navigation that has numbers in the bottom right corner. Here is an example of what I am looking for: (http://www.http://www.suprafootwear.com/). The large slideshow up top is what I want, the only difference is that I want the transition to be a linear slide motion instead of the fade transition. Please maintain the 900px x 450px size. Any help is appreciated. Thank you in advance!
推荐答案
尝试这个简单的JavaScript代码来制作图片滑块。
Try this simple javascript code to make image slider.
<html>
<head>
<style>
.container{
position:relative;
width:100%;
height:300px;
border-radius:5px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<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>
<script>
(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);
}
})();
</script>
</body>
</html>
这篇关于如何使一个简单的自动播放幻灯片与javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
