JS实现轮播图

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量1.3w 收藏 82
点赞数 13
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andrew_SJ/article/details/118193793
版权

本文参考
浅墨若寒-js实现轮播图效果

在这里插入图片描述

大体思路： 先创建一个div，限定其宽度和高度，overflow：hidden，且设置其position为relative。然后创建一个装图片的div，宽度为所有图片的总宽度，且设置其position为absolute，并且使其中的内容浮动，这样所有的图片就处于一行中。然后为了实现无缝滚动，所以需要在首尾分别添加一张过渡图片。 先添加两个按钮， 使其可以手动轮播，然后只需要添加一个定时器使其朝一个方向自动轮播即可，因为用户有时需要查看详情，所以当鼠标进入时就clear定时器，滑出再定时播放。为了更好地用户体验，我们再下面添加了一排小圆点，用户可以清楚地知道现在所处的位置， 最后， 利用闭包使得用户可以直接通过点击小圆点切换图片。

HTML

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图js</title>
</head>
<body>
  <div class="container">
    <div class="wrap" style="left: -500px">
      <img src="imgs/500x300-4.png" alt="">
      <img src="imgs/500x300-1.png" alt="">
      <img src="imgs/500x300-2.png" alt="">
      <img src="imgs/500x300-3.png" alt="">
      <img src="imgs/500x300-4.png" alt="">
      <img src="imgs/500x300-1.png" alt="">
    </div>
    <div class="buttons">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>
    <a href="javascript:;" class="arrow arr_left">&lt;</a>
    <a href="javascript:;" class="arrow arr_right">&gt;</a>
  </div>
</body>
</html>

CSS

<style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    .container {
      position: relative;
      width: 500px;
      height: 300px;
      background-color: skyblue;
      overflow: hidden;
    }

    .wrap {
      position: absolute;

      width: 3000px;
      height: 300px;
      background-color: red;
    }

    .wrap img {
      float: left;
      width: 500px;
      height: 300px;
    }

    .container .buttons {
      position: absolute;
      right: 200px;
      bottom: 20px;
      width: 100px;
      height: 10px;

    }

    .container .buttons span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: yellow;
      text-align: center;
      cursor: pointer;
    }

    .container .buttons span.on {
      background-color: red;
    }

    .arrow {
      position: absolute;
      width: 25px;
      height: 25px;
      background-color: green;
      color: black;
      text-align: center;
      line-height: 25px;
      display: none;
    }

    .arr_left {
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .arr_right {
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .container:hover .arrow {
      display: block;
    }
  </style>

JS

 <script>
    // 获取元素
    var wrap = document.querySelector('.wrap');
    var next = document.querySelector('.arr_right');
    var prev = document.querySelector('.arr_left');

    // 给前后箭头绑定事件
    next.onclick = function () {
      next_pic();
    }
    prev.onclick = function () {
      prev_pic();
    }

    function next_pic() {
      var newLeft;
      if (wrap.style.left === '-2500px') {
        newLeft = -1000;
      } else {
        newLeft = parseInt(wrap.style.left) - 500;
      }
      wrap.style.left = newLeft + 'px';

      // 小圆点相关代码
      index++;
      if (index > 3) {
        index = 0;
      }
      showCurrentDot();
    }

    function prev_pic() {
      var newLeft;
      if (wrap.style.left === '0px') {
        newLeft = -1500;
      } else {
        newLeft = parseInt(wrap.style.left) + 500;
      }
      wrap.style.left = newLeft + 'px';

      // 小圆点相关代码
      index--;
      if (index < 0) {
        index = 3;
      }
      showCurrentDot();
    }

    // 自动播放
    var timer = null; // 声明定时器，以便后面可以清除它
    function autoPlay() {
      timer = setInterval(function () {
        next_pic();
      }, 1000)
    }
    autoPlay();

    // 鼠标移到图片时停止自动播放，移开鼠标继续自动播放
    var container = document.querySelector('.container');
    container.onmouseenter = function () {
      clearInterval(timer); // 清除定时器
    }
    container.onmouseleave = function () {
      autoPlay();
    }

    // 底部小圆圈随图片变化而变化
    var index = 0; // 定义index，为每个小圆点和图片对应的索引号
    var dots = document.querySelectorAll('span');
    // 使当前图片对应的小圆点变色
    function showCurrentDot() {
      // 其余小圆点清除类
      for (var i = 0; i < dots.length; i++) {
        dots[i].className = '';
      }
      // 当前小圆点添加类（当前类on有变色效果）
      dots[index].className = 'on';
    }

    // 点击底部小圆点，跳到对应图片
    for (var i = 0; i < dots.length; i++) {
      (function (i) {
        dots[i].onclick = function () {
          var dis = index - i;
          if (index == 3 && parseInt(wrap.style.left) != -2000) {
            dis = dis - 4;
          }
          if (index == 0 && parseInt(wrap.style.left) != -500) {
            dis = 5 + dis;
          }
          wrap.style.left = (parseInt(wrap.style.left) + dis * 500) + 'px';
          index = i;
          showCurrentDot();
        }
      })(i);
    }
  </script>

完整代码

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图js</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    .container {
      position: relative;
      width: 500px;
      height: 300px;
      background-color: skyblue;
      overflow: hidden;
    }

    .wrap {
      position: absolute;

      width: 3000px;
      height: 300px;
      background-color: red;
    }

    .wrap img {
      float: left;
      width: 500px;
      height: 300px;
    }

    .container .buttons {
      position: absolute;
      right: 200px;
      bottom: 20px;
      width: 100px;
      height: 10px;

    }

    .container .buttons span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: yellow;
      text-align: center;
      cursor: pointer;
    }

    .container .buttons span.on {
      background-color: red;
    }

    .arrow {
      position: absolute;
      width: 25px;
      height: 25px;
      background-color: green;
      color: black;
      text-align: center;
      line-height: 25px;
      display: none;
    }

    .arr_left {
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .arr_right {
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .container:hover .arrow {
      display: block;
    }
  </style>


</head>

<body>
  <div class="container">
    <div class="wrap" style="left: -500px">
      <img src="imgs/500x300-4.png" alt="">
      <img src="imgs/500x300-1.png" alt="">
      <img src="imgs/500x300-2.png" alt="">
      <img src="imgs/500x300-3.png" alt="">
      <img src="imgs/500x300-4.png" alt="">
      <img src="imgs/500x300-1.png" alt="">

    </div>
    <div class="buttons">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>

    <a href="javascript:;" class="arrow arr_left">&lt;</a>
    <a href="javascript:;" class="arrow arr_right">&gt;</a>
  </div>




  <script>
    // 获取元素
    var wrap = document.querySelector('.wrap');
    var next = document.querySelector('.arr_right');
    var prev = document.querySelector('.arr_left');

    // 给前后箭头绑定事件
    next.onclick = function () {
      next_pic();
    }
    prev.onclick = function () {
      prev_pic();
    }

    function next_pic() {
      var newLeft;
      if (wrap.style.left === '-2500px') {
        newLeft = -1000;
      } else {
        newLeft = parseInt(wrap.style.left) - 500;
      }
      wrap.style.left = newLeft + 'px';

      // 小圆点相关代码
      index++;
      if (index > 3) {
        index = 0;
      }
      showCurrentDot();
    }

    function prev_pic() {
      var newLeft;
      if (wrap.style.left === '0px') {
        newLeft = -1500;
      } else {
        newLeft = parseInt(wrap.style.left) + 500;
      }
      wrap.style.left = newLeft + 'px';

      // 小圆点相关代码
      index--;
      if (index < 0) {
        index = 3;
      }
      showCurrentDot();
    }

    // 自动播放
    var timer = null; // 声明定时器，以便后面可以清除它
    function autoPlay() {
      timer = setInterval(function () {
        next_pic();
      }, 1000)
    }
    autoPlay();

    // 鼠标移到图片时停止自动播放，移开鼠标继续自动播放
    var container = document.querySelector('.container');
    container.onmouseenter = function () {
      clearInterval(timer); // 清除定时器
    }
    container.onmouseleave = function () {
      autoPlay();
    }

    // 底部小圆圈随图片变化而变化
    var index = 0; // 定义index，为每个小圆点和图片对应的索引号
    var dots = document.querySelectorAll('span');
    // 使当前图片对应的小圆点变色
    function showCurrentDot() {
      // 其余小圆点清除类
      for (var i = 0; i < dots.length; i++) {
        dots[i].className = '';
      }
      // 当前小圆点添加类（当前类on有变色效果）
      dots[index].className = 'on';
    }

    // 点击底部小圆点，跳到对应图片
    for (var i = 0; i < dots.length; i++) {
      (function (i) {
        dots[i].onclick = function () {
          var dis = index - i;
          if (index == 3 && parseInt(wrap.style.left) != -2000) {
            dis = dis - 4;
          }
          if (index == 0 && parseInt(wrap.style.left) != -500) {
            dis = 5 + dis;
          }
          wrap.style.left = (parseInt(wrap.style.left) + dis * 500) + 'px';
          index = i;
          showCurrentDot();
        }
      })(i);
    }
  </script>
</body>
</html>
Andrew_SJ
关注
  • 13
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js实现轮播图
qq_65528486的博客
08-09 1597
具有以下功能：1.自动图片轮播 2.鼠标移入当前页面暂停，移出继续播放 3.底下小按钮切换图片。
javascript轮播图超详细
周百万的博客
07-06 1万+
鼠标移动到轮播图中显示左右按钮，轮播图片的定时器停止 鼠标移出轮播图隐藏左右按钮，轮播图片的定时器开始 动态创建下面的小圆点 无缝滚动效果 点击左右按钮能切换图片，点击小圆点也能切换到对应的图片中，定时器切换图片 使用时间阀，只有点击左右按钮图片运动完成之后，点击左右按钮才能再次滚动，防止点击左右按钮次数过多，图片滚动过快的情况...
js轮播图 最简单代码
m0_54589634的博客
10-24 2万+
js轮播图 最简单代码 今天来分享一篇js最简单轮播图轮播图，用最简单的代码实现： 首先，建立一个HTML文件，插入img标签，这里我们定义图片id为pic 然后使用document.getElementByid()获取img标签的id，并且定一个一个变量obj储存对象 把轮播的图片设置数字.JPG(方便插入) 定义一个全局变量num，这里我们初始图片为0.JPG。num初始值可以设置为0 创建轮播函数，使用obj变量设置img标签插入的图片，随着num数值的变化切换图片，当切换到最后一张图片时，num重
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 441
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
js实现轮播图自动轮播
weixin_47619284的博客
08-16 9692
js实现轮播图自动轮播
js实现轮播图效果 纯js实现图片自动切换
11-19
本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片； 2. 鼠标离开，恢复自动播放； 3. 点击...
纯js实现轮播图(3种轮播图).zip
12-28
在前端开发中，轮播图（Carousel）是一...以上内容涵盖了纯JavaScript实现轮播图所需的核心知识点，通过学习和实践这三种不同的轮播图实现，开发者可以深入理解JavaScript在前端动态效果中的应用，提升自己的前端技能。
原生js实现轮播图特效
11-21
鼠标不经过轮播图，轮播图也会自动播放图片。 ​ 6.鼠标经过，轮播图模块， 自动播放停止。 此文章的代码为一个完整的轮播图的实现代码，复制即可运行 实现效果由于大小问题无法上传，可自行观看淘宝或京东首页轮播...
JavaScript实现轮播图片完整代码
10-15
JavaScript 实现轮播图片是一种常见的网页动态效果，用于展示多张图片并自动切换，提供良好的用户体验。本示例代码提供了一种简洁的实现方法，主要包括以下几个关键知识点： 1. HTML 结构：HTML 部分定义了一个包含...
js实现轮播图的完整代码
10-18
主要为大家详细介绍了js实现轮播图的完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
安卓无限轮播图支持网络图片，本地图片
05-06
基于eclipse制作的安卓无限轮播图支持网络图片，本地图片。可以直接拿来用，轮播到最后一张图 没有突然跳到第一页的突兀感。
javascript实现轮播效果示例
02-15
利用js实现轮播效果 其中封装了一个简单的匀速动画函数
js 图片滚动 轮播 多种效果 代码简单 详细
03-31
采用js及jquery技术实现的图片滚动以及滚轮播放效果，简单易用
JavaScript实现图片轮播组件代码示例
10-21
本篇文章主要介绍了JavaScript实现图片轮播组件代码示例，对图片轮播效果感兴趣的小伙伴们可以参考一下。
JS轮播图（焦点图）最详细解析，（思路是什么，每一步要怎么做，为啥要这么做，需要注意什么，bug怎么处理，附hmtl、css、js代码和详解）
tuzi007a的博客
04-30 4634
棒棒糖要原味的~~分享实用干货，让理论简单化。 这两天挤时间仔细做了轮播图效果。并且刚刚搞了个制作动图的小工具，刚好试用一下，来看看效果→_→ 感觉很好玩的样子，哈哈哈哈~ 话说csdn是否考虑在写博客的里面加个表情包，感觉会更好玩啦~（来自一个表情包控的yy*-* ) 老规矩，话不多说，干货奉上→ 读前说明： 1，为了方法简化 效果直观，我这次写的只是一个模板，没有添加图片，而且给盒子都加...
原生JS实现轮播图(3种方法)
热门推荐
HaiJun_Aion的博客
01-26 4万+
最近在巩固JS基础知识，顺手敲了个轮播图，它有3种换图方法。 自动换图 (设置定时器每隔2s换一张图) 点击左右箭头换图 点击小圆点换图 代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&
js的轮播图
beeliang
04-19 290
实现自动轮播、左右按钮切换上下一张图片、点击小圆点切换图片 效果图： 1.前期html和css布局 <div class="main"> <div class="focu"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> < </a> <!-- 右侧按钮 --&gt..
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值