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 相关文章推荐
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
javascript实用方法总结
Feb 06 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
vue.js实现二级菜单效果
Oct 19 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 什么是PEAR?
2009/03/19 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php基本函数汇总
2015/07/09 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
详解python statistics模块及函数用法
2019/10/27 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
python 绘制场景热力图的示例
2020/09/23 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
五四青年节优秀演讲稿范文
2014/05/28 职场文书
市场策划求职信
2014/08/07 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
父亲节感言
2015/08/03 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
手写实现JS中的new
2021/11/07 Javascript
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js