轮播图大家都见到过把，腾讯视频点开后，在正中间就有一个轮播图，它会随着时间而轮流播放，到最后一张后，又会回到第一张图
写它的html
<!-- 写一个盒子放图片 -->
<div>
<ul>
<!-- 把图片放到li中 -->
<li class="active"><img src="./tu/11.jpg" alt=""></li>
<!-- 给其中一个起个名，后面用来隐藏 -->
<li><img src="./tu/22.jpg" alt=""></li>
<li><img src="./tu/33.jpg" alt=""></li>
<li><img src="./tu/44.jpg" alt=""></li>
<li><img src="./tu/55.jpg" alt=""></li>
<li><img src="./tu/66.jpg" alt=""></li>
</ul>
<span id="hou">></span>
<!-- 下一场按钮 -->
<span id="qian"><</span>
<!-- 上一张按钮 -->
<!-- 图片导航 -->
<ol>
<li class="active">1</li>
<!-- 给其中一个起个名，后面用来隐藏 -->
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
div{
width: 1000px;
height: 600px;
position: relative;
margin: 0 auto;
// 装图片容器大小以及图片大小
ul{
li{
width: 100%;
height: 600px;
margin: 0px 20px 20px 0px;
display: none;
img{
width: 100%;
height: 600px;
}
}
}
//把图片导航定位到容器合适的地方
ol{
position: absolute;
left: 150px;
bottom: 50px;
li{
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 2px solid red;
border-radius: 50%;
background-color: #fff;
color: #000;
margin-right: 80px;
font-size: 20px;
}
}
//前一张按钮的大小及其它样式
#qian{
position: absolute;
width: 80px;
height: 120px;
background-color: #000;
line-height: 120px;
text-align: center;
font-size: 50px;
opacity: 0.5;
color: #fff;
top:50%;
margin-top: -60px;
left: 0px;
}
//后一张按钮的大小及其它样式
#hou{
position: absolute;
width: 80px;
height: 120px;
background-color: #000;
line-height: 120px;
text-align: center;
font-size: 50px;
opacity: 0.5;
color: #fff;
top:50%;
margin-top: -60px;
right: 0px;
}
//起这个class名的隐藏
.active{
display: block;
background-color: yellow;
}
}
用js实现它的功能
//当html以及scss加载完成后加载它
window.onload =function(){
var div = document.querySelector("div");
//获取div
var imgs = document.querySelectorAll("ul li");
//获取图片
var lis =document.querySelectorAll("ol li");
//获取图片导航
var qian =document.querySelector("#qian");
//获取id名为前的span
var hou =document.querySelector("#hou");
//获取id名为前的span
var index = 0 , timer =null;
//设置一个下标写为0，再写个定时器名为空
//封装 一个下标动时，图片也动
function auto(){
index++;
//下标每次+1
if(index > imgs.length-1){
//判断下标是否大于最后一个下标，如果大于，下标返回0
index = 0;
}
for(var i = 0; i<imgs.length; i++){
// 排他思想
imgs[i].classList.remove("active");
//把图片都隐藏
lis[i].classList.remove("active");
//图片导航也影藏
}
imgs[index].classList.add("active");
//图片给定条件那一项出现
lis[index].classList.add("active");
//图片导航给定条件那一项出现
}
//封装排他
function other(ind){
for(var i = 0; i<imgs.length; i++){
imgs[i].classList.remove("active");
lis[i].classList.remove("active");
}
imgs[ind].classList.add("active");
lis[ind].classList.add("active");
}
//点击大于号
hou.onclick =function(){
auto();
//执行上面封装好的下标涨，图片也跟随动
}
//点击小于号
qian.onclick =function(){
index--;
//下标递减
if(index < 0){
//如果小于0
index =imgs.length-1
//返回到最后一张图片的下标
}
other(index);
// 排他
}
timer = setInterval(auto,800);
//定时器每500毫秒，执行一次图片向后涨一个
div.onmouseover =function(){
//鼠标移入
clearInterval(timer);
//定时器停止
timer = null;
//定时器为空
}
div.onmouseout =function(){
//鼠标移出
timer = setInterval(auto,800);
//定时器继续
}
for(var j = 0; j<lis.length ;j++){
//循环每一个ol下的li
lis[j].ind = j;
//保留一个下标
lis[j].onclick =function(){
//点击每一个ol下的li
index = this.ind
//当前下标为指定的下标
other(this.ind);
//排他 下标为指定下标
}
}
}
如此，该案例就写完了，它会随着时间动而动，循环到最后一张图片后，立即返回到第一张图片，如此无限循环。
