JavaScript实现轮播图效果

2024-10-01 10:04:15

要求：

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

代码实现：

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="https://blog-static.cnblogs.com/files/jacklzx/animate.js"></script>
  <script src="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.js"></script>
</head>

<body>
  <div class="focus">
    <!-- 左侧按钮 -->
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-l">&lt;</a>
    <!-- 右侧按钮 -->
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-r">&gt;</a>
    <!-- 滚动区域 -->
    <ul>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1wlt.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W3nHS.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0Wtrmq.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1NYd.jpg" alt=""></a>
      </li>
    </ul>
    <!-- 小圆圈 -->
    <ol class="circle">
    </ol>
  </div>
</body>

</html>

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 ? 0 : circle;
    circleChange();
  });

  // 点击左侧按钮，图片滚动
  arrow_l.addEventListener('click', function() {
    if (num == 0) {
      num = ul.children.length - 1;
      ul.style.left = -num * focusWidth + 'px';
    }
    num--;
    animate(ul, -num * focusWidth, step);
    // circle控制小圆圈的播放
    circle--;
    circle = circle < 0 ? (ol.children.length - 1) : circle;
    circleChange();
  });

  // 小圈圈改变样式
  function circleChange() {
    // 排他其他
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    // 留下自己
    ol.children[circle].className = 'current';
  }

  // 自动播放功能
  var timer = setInterval(function() {
    // 手动调用点击事件
    arrow_r.click();
  }, 2000);
});

animate.js：

function animate(obj, target, time, callback) {
  // 先清除以前的定时器，只保留当前的一个定时器执行
  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);
      // 回调函数写到定时器结束里面
      callback && callback();
    }
    obj.style.left = obj.offsetLeft + step + 'px';
  }, time);
}

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

原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: 初始化: 包括外边距margin.内边距padding.链接a.图片img.输入框input.列表ul.li.网页html.body一系列初始化 css设置: 根据图片数与图片宽度设置轮播图宽度二.设置js逻辑需要完成的功能有: 1.鼠标移入轮播图逐渐出现左右浮动块 2.点击浮动块切换图片 3
JS实现小米轮播图

原生JS仿小米轮播图(最新版易懂),供大家参考,具体内容如下本次内容主要可实现的效果: 自动轮播可点击上一张下一张进行图片的切换点击右下方小圆点进行图片切换代码部分: H5: <div class="wrap"> <ul class="list"> <li class="item active"><img src="img/001.jpg" alt=""&
js实现点击左右按钮轮播图片效果实例

本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
js代码编写无缝轮播图

本文实例为大家分享了js编写无缝轮播图的具体代码,供大家参考,具体内容如下前言这个是一个轮播图提示: 请让最后一个img和第一个img是一张图片相同且 li数目为img数目-1: 一.无缝轮播图让第一张和最后一张相同 type:第一张和最后一张相同: 在最后一张向下一张切换时,立刻跳到第一张然后向第二张正常切换二.使用步骤 1.html代码代码如下(示例): <div class="banner"> <div class="qh"&
javascript实现点击按钮切换轮播图功能

本文实例为大家分享了js实现点击按钮切换轮播图的具体代码,供大家参考,具体内容如下菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2.点击右下角小圆也可以进行图片的跳转 (1)通过索引让变量进行随意的修改 3.每间隔3s进行轮播图的自动切换,鼠标放在图片上清除自动切换 (1)定时器 4.鼠标放在主菜单上显示子菜单,离开子菜单消失. 放在子菜单上显示
JS实现炫酷轮播图

本文实例为大家分享了JS实现炫酷轮播图的具体代码,供大家参考,具体内容如下效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
js轮播图之旋转木马效果

本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换左旋转:将数组第一个数据删除,然后添加到数组的最后右旋转:将数组最后一个数据删除,然后添加到数组的开头先附上效果图,再来实现接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl
js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner">
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

JavaScript实现轮播图效果

相关推荐

随机推荐