我想制作一个简单的幻灯片,在页面加载时自动播放。到目前为止,这是我的代码:
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的尺寸。任何帮助表示赞赏。先感谢您!
答案 0 :(得分:5)
如果你想在加载时无限重复而没有按钮来控制它,则不需要JavaScript。使用CSS关键帧动画或过渡。
见这里:
http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/
http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
答案 1 :(得分:4)
看看KickStart http://www.99lime.com/elements/它正是您需要的,以及其他一些非常有用的快速开发元素。
答案 2 :(得分:3)
尝试使用这个简单的javascript代码制作图片滑块。
<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>
答案 3 :(得分:2)
$(&#34; #slideshow&gt; div:gt(0)&#34;)。hide();
setInterval(function(){$(&#39; #slideshow&gt; div:first&#39;) .fadeOut(1000) 。下一个() .fadeIn(1000) 。结束() .appendTo(&#39;#幻灯片&#39); },3000);