JavaScript实现轮播图效果代码实例

(编辑：jimmy 日期: 2024/5/8 浏览：3 次 )

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

HTML部分：

<!-- HTML部分 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/demo06.css" rel="external nofollow" />
    <script src="/UploadFiles/2021-04-02/demo06.js">

CSS部分


*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.container{
  width: 600px;
  height: 400px;
  border: 4px double #FF6633;
  margin: 0 auto;
}

/* 轮播图 */
.lbimg li{
  width: 100%;
  height: 350px;
  text-align: center;
  line-height: 350px;
  display: none;
  font-size: 25px;
  color: #FF6633;
}
.lbimg .on{
  display: block;
}

.btn{
  width: 100%;
  height: 50px;
  background-color: #3CBDFF;
  display: flex;
}
.btn li{
  flex: 1;
  color: #fff;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  font-family: "楷体";
  cursor: pointer;
  
}
.btn .active{
  background-color: rgba(0,0,0,0.2);
  transition: all ease-in-out 0.25s;
}


JavaScript部分


window.onload=function(){
  var lbimg=document.querySelector(".lbimg");
  var lbimgs=lbimg.querySelectorAll("li");
  var btn=document.querySelector(".btn");
  var btns=btn.querySelectorAll("li");
  
  for (var i = 0; i < btns.length; i++) {
    
    btns[i].index=i;
    btns[i].onclick=function(){
      clearInterval(timer);
      for (var j = 0; j < lbimgs.length; j++) {
        lbimgs[j].className="";
      }
      // 按钮颜色跟着变化
      for(var k=0;k<btns.length;k++){
        btns[k].className="";
      }
      // 轮播同步，点击后图片的位置从点击的地方开始轮播
      index=this.index;
      btns[this.index].className="active";
      lbimgs[this.index].className="on";
      timer=setInterval(autoPlay,1000);
    }
  }
  var index=0;
  // 自动轮播
  index++;
  var timer=setInterval(autoPlay,1000);
  function autoPlay(){
    for (var i = 0; i < lbimgs.length; i++) {
      lbimgs[i].className="";
    }
    for (var j = 0; j < btns.length; j++) {
      btns[j].className="";
    }
    if(index==lbimgs.length-1){
      index=0;
    }else{
      index++;
    }
    btns[index].className="active";
    lbimgs[index].className="on";
  }
  
  // 鼠标移动时清除定时器
  lbimg.onmouseover=function(){
    clearInterval(timer);
  }
  lbimg.onmouseout=function(){
    timer=setInterval(autoPlay,1000);
  }
  
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：解决layui批量传值到后台操作时出现传值为空的问题
下一篇：json字符串对象转换代码实例