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并非所有的一切都是对象
Apr 11 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
ES6 解构赋值的原理及运用
May 25 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
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript textContent与innerText的异同分析
2010/10/22 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
django query模块
2019/04/20 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Django缓存Cache使用详解
2020/11/30 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
竞选大队委员演讲稿
2014/04/28 职场文书
团队会宣传标语
2014/10/09 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
环境卫生整治简报
2015/07/20 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
学校学期工作总结
2015/08/13 职场文书
环保建议书范文
2015/09/14 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle