如何实现轮播效果
先上完整代码！
<body>
<div>
<img id="imgs">
</div>
</body>
<script>
window.onload = function(){
var i = 0;
var images = ['img/a1.JPG','img/a2.JPG'];
window.setInterval(function(){
var imgs = document.getElementById('imgs');
if(i==images.length){
i=0;
}
imgs.src=images[i];
i++
},1*1000);
}
</script>简单实现了一个轮播效果，images数组里存的是图片的路径，现在来简单讲解一下如何实现的。
1、延迟函数
由于轮播图是在网页加载完毕后立刻就要执行的操作，所以我们需要写在onload函数里。
window.onload = function(){}2、周期定时器
轮播嘛，过了一定的时间就要显示另一张图片，所以需要用到定时器。
tip：1000毫秒=1秒
window.setInterval(function(){
},1000);3、改变<img>中的src属性
用js改变<img>中的src属性，实现刷新。
<img id="imgs">var imgs = document.getElementById('imgs');
imgs.src="图片路径"
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
