js实现轮播图效果 纯js实现图片自动切换


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下

1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片;
2. 鼠标离开,恢复自动播放;
3. 点击下方中间几个小圆圈,也会自动切换图片;

js实现轮播图效果 纯js实现图片自动切换

js实现轮播图效果 纯js实现图片自动切换

源代码:

<!DOCTYPE html>


<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }

  /* 轮播图盒子样式 */
  .lunbotu {
   position: relative;
   width: 520px;
   height: 280px;
   margin: 50px auto;
   background-color: blue;
   overflow: hidden;
  }

  /* 左右按钮样式 */
  .left,
  .right {
   display: none;
   position: absolute;
   top: 50%;
   margin-top: -15px;
   width: 30px;
   height: 30px;
   background-color: cornsilk;
   border-radius: 15px;
   text-align: center;
   line-height: 30px;
   cursor: pointer;
   z-index: 1;
  }

  .left {
   left: 0;
  }

  .right {

   right: 0;
  }


  li {
   list-style: none;
  }

  /* 设置图片的ul的样式 */
  .firstul {
   position: absolute;
   top: 0;
   left: 0;
   width: 500%;

  }

  .firstul li {
   float: left;
   /* display: none; */
  }

  /* 设置小圆圈的样式 */
  ol {
   /* width: 90px; */
   padding: 0 5px 0 5px;
   position: absolute;
   bottom: 10px;
   left: 50%;
   margin-left: -45px;
   background-color: darkgrey;
   text-align: center;
   border-radius: 9px;
  }

  ol li {
   display: inline-block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   margin-right: 5px;
   background-color: white;
   cursor: pointer;
  }

  .current {
   background-color: red;
  }
 </style>
 <script src="animation.js"></script>
</head>

<body>
 <!-- 图片大小全部是520*280 -->
 <div class="lunbotu">
  <!-- 左右按钮 -->
  <div class="left">></div>
  <div class="right"><</div>
    <!-- 图片部分 -->
    <ul class="firstul">
     <li><a href=""><img src=" images/1.jpg" alt=""> </a></li>
     <li><a href=""><img src=" images/2.jpg" alt=""> </a></li>
     <li><a href=""><img src=" images/3.gif" alt=""> </a></li>
     <li><a href=""><img src=" images/4.webp" alt=""> </a></li>
    </ul>
    <!-- 小圆圈 -->
    <ol class="firstol"></ol>
  </div>
  <!-- JS部分 -->
  <script>
   // 1.获取事件源
   var lunbotu = document.querySelector('.lunbotu');
   var leftBox = document.querySelector('.left');
   var rightBox = document.querySelector('.right');
   var ul = lunbotu.querySelector('ul');
   var ol = lunbotu.querySelector('ol');
   var right = document.querySelector('.right');
   var left = document.querySelector('.left');
   var lunbotuWidth = lunbotu.offsetWidth;
   // console.log(ul)
   // console.log(ol)
   // 第一步:
   // 鼠标经过轮播图的时候,左右小按钮弹出
   lunbotu.addEventListener('mouseenter', function () {
    leftBox.style.display = 'block';
    rightBox.style.display = 'block';
    // 鼠标经过轮播图的时候,停止定时器
    clearInterval(timer);
   })
   // 鼠标离开轮播图的时候,左右小按钮隐藏
   lunbotu.addEventListener('mouseleave', function () {
    leftBox.style.display = 'none';
    rightBox.style.display = 'none';
    timer = setInterval(function () {
     right.click();
    }, 2000)

   })
   // 第二步:
   // 1.动态生成小圆圈
   // 2.小圆圈的个数要跟图片一样
   // 3.先得到ul里面图片的张数(图片放入li里面,所以就是li的个数)
   // 4.利用循环动态生成小圆圈(这个小圆圈要放入ol里面)
   // 5.创建节点createElement('li')]
   // 6.插入节点ol.appendChild(li)
   // 7.第一个小圆圈需要添加current类
   for (var i = 0; i < ul.children.length; i++) {
    // 创建一个li
    var li = document.createElement('li')
    // 记录当前小圆圈的索引号 通过自定义属性来做
    li.setAttribute('index', i);
    // 把li添加到ol
    ol.appendChild(li);
   }
   // 排他思想:让小Li变白色
   for (var i = 0; i < ol.children.length; i++) {
    ol.children[i].addEventListener('click', function () {
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     } this.className = 'current';

     // 点击小圆圈的时候切换到对应的图片
     // 得到索引号 index
     var index = this.getAttribute('index');
     // 解决小bug
     num = index;
     num_ol = index;
     // console.log(lunbotuWidth);
     // console.log(index)
     animation(ul, - index * lunbotuWidth)
    })
   }
   // 给第一个li变颜色
   ol.children[0].className = 'current';
   // 克隆第一个li
   var first = ul.children[0].cloneNode(true);
   ul.appendChild(first);
   // 第三步:
   // 点击右边按钮事件
   var num = 0;
   // 点击右侧按钮的时候小圆圈跟着滚动
   var num_ol = 0;
   // 节流阀,防止点击过快,最后才加这句优化
   var flag = true;
   // 右侧按钮:
   right.addEventListener('click', function () {
    if (flag) {
     flag = false; // 关闭节流阀
     if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
     }
     num++;
     animation(ul, -num * lunbotuWidth, function () {
      flag = true;
     });
     num_ol++;
     if (num_ol == ol.children.length) {
      num_ol = 0
     }
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     }
     ol.children[num_ol].className = 'current';
    }
   });
   // 左侧按钮:
   left.addEventListener('click', function () {
    if (flag) {
     flag = false;
     if (num == 0) {
      ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';
      num = ul.children.length - 1;
     }
     num--;
     animation(ul, -num * lunbotuWidth, function () {
      flag = true;
     });
     num_ol--;
     // num_ol=0的时候需要,点击左侧按钮,需要转跳到ol.children.length-1的位置
     if (num_ol < 0) {
      num_ol = ol.children.length - 1
     }
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     }
     ol.children[num_ol].className = 'current';
    }
   });
   // 自动播放图片
   var timer = setInterval(function () {
    right.click();
   }, 2000)
  </script>
</body>
</html>

5.Js文件的代码

// 封装了一个动画js文件
function animation(obj,target,fn1){
 // console.log(fn1);
 // fn是一个回调函数,在定时器结束的时候添加
 // 每次开定时器之前先清除掉定时器
 clearInterval( obj.timer);
 obj.timer = setInterval(function(){
 // 步长计算公式 越来越小
 // 步长取整
 var step = (target - obj.offsetLeft) /10;
 step = step > 0 ? Math.ceil(step) :Math.floor(step); 

 if(obj.offsetLeft == target){
  clearInterval( obj.timer);
  // 如果fn1存在,调用fn
  if(fn1){
  fn1();
  }
 }else{
  // 每50毫秒就将新的值给obj.left
 obj.style.left = obj.offsetLeft +step +'px';
 }
 },30)
}

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

Javascript 相关文章推荐
javascript 遍历验证所有文本框的值
Aug 27 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
bootstrap实现tab选项卡切换
Aug 09 #Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 #Javascript
js利用iframe实现选项卡效果
Aug 09 #Javascript
解决vue 退出动画无效的问题
Aug 09 #Javascript
You might like
PHP连接操作access数据库实例
2015/03/30 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Python常用内置模块之xml模块(详解)
2017/05/23 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
浅谈Python __init__.py的作用
2020/10/28 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
菜篮子工程实施方案
2014/03/08 职场文书
森林防火标语
2014/06/23 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
学校献爱心活动总结
2014/07/08 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
初中毕业感言300字
2015/07/31 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android