网络编程 
首页 > 网络编程 > 浏览文章

JavaScript实现轮播图效果

(编辑：jimmy 日期: 2024/12/24 浏览：3 次 )

要求：

  1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
  2. 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
  3. 图片播放的同时，下面小圆圈模块跟随一起变化
  4. 点击小圆圈，可以播放相应图片
  5. 鼠标不经过轮播图，轮播图也会自动播放图片
  6. 鼠标经过，轮播图模块，自动播放停止

代码实现：

autoPlay.html（复制并保存为html文件，打开即可见效果）：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.css" rel="external nofollow" >
  <script src="/UploadFiles/2021-04-02/animate.js">


autoPlay.css：





li {
  list-style: none;
}

a {
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #00e1ff;
}

.focus {
  overflow: hidden;
  position: relative;
  width: 721px;
  height: 455px;
  margin: 100px auto;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
  border-radius: 40px;
}

.focus ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 600%;
}

.focus ul li {
  float: left;
}

.arrow-l {
  display: none;
  position: absolute;
  top: 50%;
  left: -12px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 0 50% 50% 0;
  z-index: 999;
}

.arrow-r {
  display: none;
  position: absolute;
  top: 50%;
  right: -12px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 50% 0 0 50%;
  z-index: 999;
}

.circle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.circle li {
  float: left;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, .5);
  margin: 0 4px;
  border-radius: 50%;
  cursor: pointer;
}

.current {
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
}






autoPlay.js：





window.addEventListener('load', function() {
  // 获取元素
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var focus = document.querySelector('.focus');
  var focusWidth = focus.offsetWidth;
  // 自定义动画函数animate的参数，表示动画间隔
  var step = 5;
  // 鼠标经过focus 就显示左右按钮，停止计时器
  focus.addEventListener('mouseenter', function() {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
    timer = null; // 清空计时器
  });
  // 鼠标离开focus 就隐藏左右按钮，调用定时器
  focus.addEventListener('mouseleave', function() {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function() {
      // 手动调用点击事件
      arrow_r.click();
    }, 2000);
  });

  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle');
  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.addEventListener('click', function() {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      this.className = 'current';
      // 点击小圈圈，移动图片，移动的是ul
      // 点击li，拿到当前的索引号
      var index = this.getAttribute('index');
      // 当点击了li之后，就要把index给num，实现同步
      num = index;
      // 当点击了li之后，就要把index给circle，实现同步
      circle = index;
      animate(ul, -index * focusWidth, step);
    });
  }
  // ol里第一个li的类名设置为current
  ol.children[0].className = 'current';
  var num = 0;
  // circle控制小圆圈的播放
  var circle = 0;
  // 克隆第一章图片li，放到ul最后面
  // 要在生成小圆圈之后克隆
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);
  // 点击右侧按钮，图片滚动
  arrow_r.addEventListener('click', function() {
    // 如果到了最后一张图片，ul要快速复原：left改为0
    if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
    }
    num++;
    animate(ul, -num * focusWidth, step);
    // circle控制小圆圈的播放
    circle++;
    circle = circle == ol.children.length "htmlcode">



function animate(obj, target, time, callback) {
  // 先清除以前的定时器，只保留当前的一个定时器执行
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    // 步长值写到定时器的里面，并设置为整数
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 "text-align: center">JavaScript实现轮播图效果


以上就是JavaScript实现轮播图效果的详细内容，更多关于JavaScript 轮播图的资料请关注其它相关文章！


            

           
            上一篇：vue2.0 watch里面的 deep和immediate用法说明

            下一篇：vue组件添加事件@click.native操作
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？