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


Posted in Javascript onSeptember 28, 2019

这篇文章主要介绍了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);
  }
  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 构造函数 实例分析
Nov 26 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
Javascript的this详解
Mar 23 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
json字符串对象转换代码实例
Sep 28 #Javascript
javascript头像上传代码实例
Sep 28 #Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 #Javascript
JavaScript生成随机验证码代码实例
Sep 28 #Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 #Javascript
layui时间控件选择时间范围的实现方法
Sep 28 #Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 #Javascript
You might like
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python实现文件快照加密保护的方法
2015/06/30 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
简单了解python的内存管理机制
2019/07/08 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
教师求职信范文分享
2013/12/27 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python