如何使用JavaScript实现无缝滚动自动播放轮播图效果

站长资源 2024/12/24 佚名

56 1538 56

铁雪资源网 Design By www.gsvan.com

在一些项目开发中，我们经常需要使用到轮播图，但是没有深入学习的情况下做轮播图是非常困难的。

思路

分成小问题来解决

1. 动态生成序号12345

页面有多少li（图片），就有多少序号

2. 点击序号、显示高亮、切换图片

2.1 给序号注册onclick事件

2.2 取消其他序号高亮显示，让当前点击的序号高亮显示

2.3 点击序号，动画的方式切换到当前点击的图片位置（设置自定义属性，记录当前索引，有了索引就可用动画进行移动）

3. 鼠标放到盒子上的时候显示左右箭头，移开时候隐藏

onmouseenter和onmouseleave

4. 实现左右箭头播放上一张下一张（无缝滚动）

5. 隔多少时间自动播放

setInterval 和 element1..click() 联合即可实现

代码： index.html:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        border: 0;
      }

      body {
        margin: 0;
        background-color: rgb(55, 190, 89);
      }

      .all {
        width: 500px;
        height: 200px;
        padding: 4px;
        margin: 100px auto;
        position: relative;
        background-color: #fff;
        border-radius: 20px;
      }

      .screen {
        width: 500px;
        height: 200px;
        border-radius: 17px;
        overflow: hidden;
        position: relative;
      }

      .screen li {
        width: 500px;
        height: 200px;
        overflow: hidden;
        float: left;
      }

      .screen ul {
        position: absolute;
        left: 0;
        top: 0px;
        width: 3000px;
      }

      .all ol {
        position: absolute;
        right: 180px;
        bottom: 10px;
        line-height: 20px;
        text-align: center;
      }
      
      .all ol li {
        float: left;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #ccc;
        margin-left: 10px;
        cursor: pointer;
        opacity: 0.5;
        /* 透明度 */
      }

      .all ol li.current {
        opacity: 1.0;
      }

      #arr {
        display: none;
        z-index: 1000;

      }

      #arr span {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -20px;
        background: #000;
        cursor: pointer;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: '黑体';
        font-size: 30px;
        color: #fff;
        opacity: 0.5;
        border: 1px solid #fff;
        border-radius: 5px;
      }

      #arr #right {
        right: 5px;
        left: auto;
      }
    </style>
  </head>

  <body>
    <div class="all" id='box'>
      <div class="screen">
        <ul>
          <li><img src="/UploadFiles/2021-04-02/wf1.jpg">

index.js


//获取元素
var box = my$('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1]
//获取箭头
var arr = my$('arr');
var arrLeft = my$('left');
var arrRight = my$('right');
var count = ul.children.length; /* 获取图片数量 还没有放cloneLi，所以数值是5*/
var imgWidth = screen.offsetWidth; /* 获取的图片（盒子）的宽高 */
//1.动态生成序号
for (i = 0; i < count; i++) {
  // 在ol内创建li
  var li = document.createElement('li');
  ol.appendChild(li);
  // li内赋予数值
  setInnerText(li, i + 1);
  li.onclick = liClick;
  // 设置标签的自定义属性（创建索引）
  li.setAttribute('index', i);
}

// 2.点击序号，切换，显示高亮
function liClick() {
  // 取消其他的li的高亮，显示当前li高亮
  for (i = 0; i < ol.children.length; i++) {
    var li = ol.children[i];
    li.className = '';
    this.className = 'current';
  }

  // 获取的自定义属性是字符串类型，要转成整数
  var liIndex = parseInt(this.getAttribute('index'));
  animate(ul, -liIndex * imgWidth);
  //使得后面定义的全局变量index等于li的属性liIndex
  index = liIndex;
}

//ol内的第一个li显示高亮色
ol.children[0].className = 'current';

//3.鼠标放上去的时候显示箭头
// onmouseover和onmouseout会触发事件冒泡；onmouseleave和onmouseenter不会触发事件冒泡
box.onmouseenter = function () {
  arr.style.display = 'block';
  clearInterval(timeId);
}

box.onmouseleave = function () {
  arr.style.display = 'none';
  timeId = setInterval(function () {
    arrRight.click();
  }, 2500)
}

// 4.实现上一张，下一张的功能  
var index = 0; //第一张图片的索引

arrRight.onclick = function () {
  // 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片
  if (index === count) {
    ul.style.left = '0px';
    index = 0;
  }


  // 如果是最后一张图片，不让index++
  index++;
  // 有5张图片，但是还有一张克隆的图片，克隆图片索引是5
  if (index < count) {
    //获取图片对应的序号，让序号进行点击
    ol.children[index].click();
  } else {
    animate(ul, -index * imgWidth);
    // 取消所有的高亮现实，让第一个序号高亮显示
    for (var i = 0; i < ol.children.length; i++) {
      var li = ol.children[i];
      li.className = '';
    }
    ol.children[0].className = 'current';
  }

  // 
}

arrLeft.onclick = function () {
  if (index === 0) {
    index = count;
    ul.style.left = -index * imgWidth + 'px';
  }
  index--;
  ol.children[index].click();
}

// 无缝滚动
var firstLi = ul.children[0];
// 克隆li  
//cloneNode() 复制节点：参数 true 复制节点中的内容 ;false 只复制当前节点，不复制里面的内容
var cloneLi = firstLi.cloneNode(true);
ul.appendChild(cloneLi)


// 5.自动播放
var timeId = setInterval(function () {
  // 切换到下一张图片
  arrRight.click();
}, 2500)


common.js


function my$(id) {
  return document.getElementById(id);
 }
 
 // 处理浏览器兼容性
 // 获取第一个子元素
 function getFirstElementChild(element) {
   var node, nodes = element.childNodes, i = 0;
   while (node = nodes[i++]) {
     if (node.nodeType === 1) {
       return node;
     }
   }
   return null;
 }
 
 // 处理浏览器兼容性
 // 获取下一个兄弟元素
  function getNextElementSibling(element) {
   var el = element;
   while (el = el.nextSibling) {
    if (el.nodeType === 1) {
      return el;
    }
   }
   return null;
  }
 
 
 // 处理innerText和textContent的兼容性问题
 // 设置标签之间的内容
 function setInnerText(element, content) {
  // 判断当前浏览器是否支持 innerText
  if (typeof element.innerText === 'string') {
   element.innerText = content;
  } else {
   element.textContent = content;
  }
 }
 
 // 处理注册事件的兼容性问题
 // eventName, 不带on， click mouseover mouseout
 function addEventListener(element, eventName, fn) {
  // 判断当前浏览器是否支持addEventListener 方法
  if (element.addEventListener) {
   element.addEventListener(eventName, fn); // 第三个参数 默认是false
  } else if (element.attachEvent) {
   element.attachEvent('on' + eventName, fn);
  } else {
   // 相当于 element.onclick = fn;
   element['on' + eventName] = fn;
  }
 }
 
 // 处理移除事件的兼容性处理
 function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
   element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
   element.detachEvent('on' + eventName, fn);
  } else {
   element['on' + eventName] = null;
  }
 }
 
 // 获取页面滚动距离的浏览器兼容性问题
 // 获取页面滚动出去的距离
 function getScroll() {
  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  return {
   scrollLeft: scrollLeft,
   scrollTop: scrollTop
  }
 }
 
 // 获取鼠标在页面的位置，处理浏览器兼容性
 function getPage(e) {
  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
  var pageY = e.pageY || e.clientY + getScroll().scrollTop;
  return {
   pageX: pageX,
   pageY: pageY
  }
 }
 
 
 //格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
 function formatDate(date) {
  // 判断参数date是否是日期对象
  // instanceof instance 实例(对象)  of 的
  // console.log(date instanceof Date);
  if (!(date instanceof Date)) {
   console.error('date不是日期对象')
   return;
  }
 
  var year = date.getFullYear(),
    month = date.getMonth() + 1,
    day = date.getDate(),
    hour = date.getHours(),
    minute = date.getMinutes(),
    second = date.getSeconds();
 
  month = month < 10 "htmlcode">

// var timerId = null;
// 封装动画的函数
function animate(element, target) {
  // 通过判断，保证页面上只有一个定时器在执行动画
  if (element.timerId) {
   clearInterval(element.timerId);
   element.timerId = null;
  }
 
  element.timerId = setInterval(function () {
   // 步进 每次移动的距离
   var step = 10;
   // 盒子当前的位置
   var current = element.offsetLeft;
   // 当从400 到 800 执行动画
   // 当从800 到 400 不执行动画
 
   // 判断如果当前位置 > 目标位置 此时的step 要小于0
   if (current > target) {
    step = - Math.abs(step);
   }
 
   // Math.abs(current - target)  <= Math.abs(step)
   if (Math.abs(current - target)  <= Math.abs(step)) {
    // 让定时器停止
    clearInterval(element.timerId);
    // 让盒子到target的位置
    element.style.left = target + 'px';
    return;
   }
   // 移动盒子
   current += step;
   element.style.left = current + 'px';
  }, 5);
 }


总结

js无缝滚动,自动播放,js轮播图

标签：

js无缝滚动,自动播放,js轮播图

铁雪资源网 Design By www.gsvan.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

铁雪资源网 Design By www.gsvan.com

评论“如何使用JavaScript实现无缝滚动自动播放轮播图效果”

暂无如何使用JavaScript实现无缝滚动自动播放轮播图效果的评论...

www.gsvan.com 铁雪资源网

39,976影音资源

144,792福利资源

1,817软件资源

431,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

如何使用JavaScript实现无缝滚动自动播放轮播图效果

js无缝滚动,自动播放,js轮播图

微信小程序连续签到7天积分获得功能的示例代码

基于NodeJS开发钉钉回调接口实现AES-CBC加解密

评论“如何使用JavaScript实现无缝滚动自动播放轮播图效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接