JavaScript实现轮播图效果代码实例-偶像资源网

这篇文章主要介绍了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=\"js/demo06.js\"></script>
  </head>
  <body>
    <div class=\"container\">
      <!-- 轮播图区域 -->
      <ul class=\"lbimg\">
        <li class=\"on\" style=\"background-color: #898989;\">轮播图1</li>
        <li style=\"background-color: #CD282B;\">轮播图2</li>
        <li style=\"background-color: pink;\">轮播图3</li>
        <li style=\"background-color: peachpuff;\">轮播图4</li>
        <li style=\"background-color: palegoldenrod;\">轮播图5</li>
      </ul>  
      <ol class=\"btn\">
        <li class=\"active\">第1张</li>
        <li>第2张</li>
        <li>第3张</li>
        <li>第4张</li>
        <li>第5张</li>
      </ol>
    </div>
  </body>
</html>

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);
  }
  
}

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论