当前位置: 首页 > 编程笔记 >

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

陆承宣
2023-03-14
本文向大家介绍JavaScript实现轮播图效果代码实例,包括了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);
  }
  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍js图片轮播效果实现代码,包括了js图片轮播效果实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 首先给大家看一看js图片轮播效果,如下图 具体思路: 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递

  • 本文向大家介绍利用iscroll4实现轮播图效果实例代码,包括了利用iscroll4实现轮播图效果实例代码的使用技巧和注意事项,需要的朋友参考一下 前言 iscroll之所以会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑

  • 本文向大家介绍Swiper实现轮播图效果,包括了Swiper实现轮播图效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Swiper实现轮播图效果的具体代码,供大家参考,具体内容如下 最后 别忘了再打这些东西之前要引Swiper.css和Swiper.js插件哦! 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jquery实现轮播图效果,包括了jquery实现轮播图效果的使用技巧和注意事项,需要的朋友参考一下 效果如下: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍flutter实现轮播图效果,包括了flutter实现轮播图效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1 添加依赖库 2 普通常用 圆点指示器自动轮播图 3 自定圆点分页指示器 效果 4 自定数字 分页指示器 效果 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于JavaScript实现轮播图代码,包括了基于JavaScript实现轮播图代码的使用技巧和注意事项,需要的朋友参考一下 一、要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二、实现代码: html代码: css代码: js代码: 以