版权声明:来自chirs,未经同意不得转载 https://blog.csdn.net/junmo_xiao/article/details/82590709
1.简单实现
1)实现思想:通过轮播次数来决定显示那一张首先,可以用简单的div 包含img的框架来实现,我们为他添加按钮,每个按钮对应不同的图片,那么,每点击一次,将要显示的图片的style.dispay属性设置为'block'将不显示的图片的display设置为none,可以实现简单的按钮点击实现轮播,再者,我们可以利用间歇调用setInterval()方法来实现自动轮播
2)算法的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
height:100px;
}
div >img{
width:500px;
height:500px;
display: block;
}
</style>
<body>
<button>显示1</button>
<button>显示2</button>
<button>显示3</button>
<button>显示4</button>
<div>
<img src="../iamges/1.jpg" alt="">
<img src="../iamges/1.jpg" alt="">
<img src="../iamges/1.jpg" alt="">
<img src="../iamges/1.jpg" alt="">
<img src="../iamges/1.jpg" alt="">
</div>
</body>
</html>
如以上代码所示,为html的写法
以下为button绑定事件,js实现轮播
<script>
window.onload =function(){
var btns= document.getElementsByTagName('button');
function change(){
for(var i =0 ; i<imgs.length;i++){
imgs[i].style.display ='none';
}img[0].style.display ='block';
}
btns[0].onclick =change;
}
</script>
此为一个点击事件的实现,其他的类似。
当然,实现了点击轮播之后,我们需要为他添加自动轮播,利用setInterval()方法,
var count=0;
setInterval(function(){
for(var i =0 ; i<imgs.length;i++){
imgs[i].style.display ='none';
}
var index =count%imgs.length;
img[count].style.display ='block';
count++;
},5000);
注意,代码中声明index 变量的用意在于,我们发现,第一次循环的时候,i==conut,但是,随着count的递增,i值没有与之相对应的,那么,第二次轮播,将无法实现。所以为count取余以后,count 0 1 2 3 4 5
index 0 1 2 0 1 2
由此实现简单的轮播。注:代码中丢失对于images元素的获取,可自行添加。