• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    js实现轮播图效果 纯js实现图片自动切换

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

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

    源代码:

    !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)
    }

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

    您可能感兴趣的文章:
    • js实现简单的可切换选项卡效果
    • javascript实现tabs选项卡切换效果(自写原生js)
    • Vue.js组件tabs实现选项卡切换效果
    • 原生js实现tab选项卡切换
    • Vue.js组件tab实现选项卡切换
    • js实现支持手机滑动切换的轮播图片效果实例
    • vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
    • JS仿京东移动端手指拨动切换轮播图效果
    • javascript实现点击按钮切换轮播图功能
    • JS实现多重选项卡切换轮播图
    上一篇:CSS实现TikTok文字抖动效果示例
    下一篇:asp.net core 授权详解
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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