简单的HTML网页图片轮播自动切换!附源码！-老K资源网

HTML部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,
    minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!--引入CSS代码-->
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
    <!--引入Js代码-->
    <script src="./js/index.js"></script>
    <title>Js实现轮播图</title>
  </head>
  <body>
    <div class="lunbo">
      <div class="content">
      <ul id="item">
        <li class="item">
          <a href="#"><img src="img/pic1.jpg" ></a>
        </li>
        <li class="item">
          <a href="#"><img src="img/pic2.jpg" ></a>
        </li>
        <li class="item">
          <a href="#"><img src="img/pic3.jpg" ></a>
        </li>
        <li class="item">
          <a href="#"><img src="img/pic4.jpg" ></a>
        </li>
        <li class="item">
          <a href="#"><img src="img/pic5.jpg" ></a>
        </li>
      </ul>
      <div id="btn-left"><</div>
      <div id="btn-right">></div>
      <ul id="circle">
        
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
        <li class="circle"></li>
      </ul>
      </div>
    </div>
  </body>
</html>

</html>

CCS部分：

*{
  margin: 0;
  padding: 0;
}
a{
  list-style: none;
}
li{
  list-style: none;
}
.lunbo{
  width: 100%;
}
.content{
  width: 800px;
  height: 300px;
  margin: 20px auto;
  position: relative;
}
#item{
  width: 100%;
  height: 100%;
  
}
.item{
  position: absolute;
  opacity: 0;
  transition: all 1s;
  
}
.item.active{
  opacity:1;
}
img{
  width: 100%;
}
#btn-left{
  width: 30px;
  height: 69px;
  font-size: 30px;
  color: white;
  background-color:rgba(0,0,0,0.4);
  line-height: 69px;
  padding-left:5px;
  z-index: 10;/*始终显示在图片的上层*/
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
  cursor: pointer;
  opacity: 0;/*平时隐藏*/
}
.lunbo:hover #btn-left{
  /*鼠标滑入，显示图标*/
  opacity: 1;
}

#btn-right{
  width: 26px;
  height: 69px;
  font-size: 30px;
  color: white;
  background-color:rgba(0,0,0,0.4);
  line-height: 69px;
  padding-left: 5px;
  z-index: 10;
  position: absolute;
  right: 0;
  top: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-60%);
}
.lunbo:hover #btn-right{
  opacity: 1;
}
#circle{
  height: 20px;
  display: flex;
  position: absolute;
  bottom: 35px;
  right: 25px;
}
.circle{
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 2px solid white;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  margin: 5px;
}
.white{
  background-color: #FFFFFF;
}

JavaScript部分：

window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;

//清除class
var clearclass=function(){
  for(let i=0;i<items.length;i++){
    items[i].className="item";
    circles[i].className="circle";
    circles[i].setAttribute("num",i);
  }
}
/*只显示一个class*/
function move(){
  clearclass();
  items[index].className="item active";
  circles[index].className="circle white";
}
//点击右边按钮切换下一张图片
rightBtn.onclick=function(){
  if(index<items.length-1){
    index++;
  }
  else{
    index=0;
  }
  move();
}
//点击左边按钮切换上一张图片
leftBtn.onclick=function(){
  if(index<items.length){
    index--;
  }
  else{
    index=items.length-1;
  }
  move();
}
//开始定时器，点击右边按钮，实现轮播
timer=setInterval(function(){
  rightBtn.onclick();
},1500)
//点击圆点时，跳转到对应图片
for(var i=0;i<circles.length;i++){
  circles[i].addEventListener("click",function(){
    var point_index=this.getAttribute("num");
    index=point_index;
    move();
  })

}
//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
content.onmouseover=function(){
  clearInterval(timer);
    timer=setInterval(function(){
      rightBtn.onclick();
    },3000)
}
//鼠标移出又开启定时器
content.onmouseleave=function(){
  clearInterval(timer);
  timer=setInterval(function(){
    rightBtn.onclick();
  },1500)
}
}

------本页内容已结束，喜欢请分享------