JS原生手写轮播图效果

下面是针对JS原生手写轮播图效果的完整攻略：

一、需求分析

首先要清楚地明确轮播图的需求，包括：

显示多张图片并自动轮播；
支持点击左侧和右侧按钮来切换图片；
支持点击数字按钮来跳转到相应的图片；
支持鼠标悬停在图片上时停止轮播，离开时继续轮播。

二、实现步骤

然后根据需求来逐步实现轮播图效果，具体步骤如下：

编写HTML结构；
设置相应的样式；
使用JS实现轮播图的自动播放效果；
使用JS实现点击按钮切换图片的效果；
使用JS实现点击数字按钮跳转到相应图片的效果；
实现鼠标悬停在图片上时轮播停止的效果。

2.1 HTML结构

首先，按照轮播图的需求，编写HTML结构。通常可以采用以下结构：

<div class="slider">
  <div class="slider-wrapper">
    <div class="slider-item"><img src="image1.jpg"></div>
    <div class="slider-item"><img src="image2.jpg"></div>
    <div class="slider-item"><img src="image3.jpg"></div>
  </div>
  <ul class="slider-nav">
    <li class="slider-nav-item">1</li>
    <li class="slider-nav-item">2</li>
    <li class="slider-nav-item">3</li>
  </ul>
  <a class="slider-control prev"></a>
  <a class="slider-control next"></a>
</div>

这段HTML代码中，.slider是整个轮播图的容器，包括一个.slider-wrapper用来包裹所有的图片，并设置overflow:hidden来隐藏溢出的部分；还有一个.slider-nav用来放置数字按钮；以及两个.slider-control分别表示向左、向右的箭头。

2.2 设置样式

接下来，需要设置轮播图的样式。通过CSS设置轮播图样式可以更好地控制UI，提供更好的用户体验。

.slider {
  position: relative;
  width: 100%;
  height: 400px;
}
.slider-wrapper {
  width: 300%;
  height: 400px;
  position: relative;
  left: 0;
  transition: left .5s;
}
.slider-item {
  float: left;
  width: 33.3333%;
  height: 400px;
  text-align: center;
  font-size: 40px;
  color: #fff;
  background-color: #000;
}
.slider-item img {
  max-width: 100%;
  max-height: 100%;
}
.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1;
}
.slider-nav-item {
  display: inline-block;
  margin-right: 10px;
  border: 2px solid #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
}
.slider-nav-item.active {
  background-color: #fff;
  color: #000;
}
.slider-control {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  z-index: 1;
}
.slider-control.prev {
  left: 20px;
}
.slider-control.next {
  right: 20px;
}

上面这段CSS代码主要做的事情是：

定义了整个轮播图容器.slider的宽度、高度等样式；
设定了.slider-wrapper中每个.slider-item的宽度、高度等样式，并设置.slider-item img的最大宽度和高度为100%，以使图片按比例自适应大小；
定义了数字按钮.slider-nav-item的样式，设置外边距、边框、圆角、文字对齐、鼠标样式等属性，以及.slider-nav-item.active的样式，表示当前选中的按钮；
定义了向左和向右箭头.slider-control的样式，设置位置、大小、背景色和鼠标样式等属性。

2.3 实现轮播图自动播放

了解了上面的基本结构和样式，接下来就要开始在JS中实现轮播图自动播放。可以采用如下代码实现：

var timer = null;
var index = 0;
var items = document.querySelectorAll('.slider-item');
var len = items.length;
var navItems = document.querySelectorAll('.slider-nav-item');

function slideNext() {
  index++;
  if (index >= len) {
    index = 0;
  }
  slideTo(index);
}

function slideTo(i) {
  var offset = -i * 100 / len;
  document.querySelector('.slider-wrapper').style.left = offset + '%';
  setActiveNav(i);
}

function setActiveNav(i) {
  [].forEach.call(navItems, function(navItem) {
    navItem.classList.remove('active');
  });
  navItems[i].classList.add('active');
}

timer = setInterval(slideNext, 3000);

上面这段代码中，主要做的事情是：

定义了一个timer变量，用来保存定时器的ID；
定义了index变量，表示当前轮播图显示的是第几张；
通过document.querySelectorAll获取了所有的轮播图图片.slider-item和数字按钮.slider-nav-item；
定义了slideNext方法和slideTo方法；
slideNext方法用于自动轮播的逻辑，其内部先将索引index自增，然后检查是否超过图片数量，如果超过了就将index重置为0；接下来调用slideTo方法，将图片滑动到指定位置；
slideTo方法根据当前要显示的图片索引，计算出需要滑动的偏移量offset，然后设置图片盒子.slider-wrapper的左偏移量为offset + '%'，以实现滑动效果；接着调用setActiveNav方法，将当前数字按钮设置为选中状态；
setActiveNav方法用来设置数字按钮的选中状态。首先使用[].forEach.call将数字按钮遍历一遍，将所有的数字按钮都设置为非选中状态；然后将当前要选中的数字按钮设置为选中状态。

2.4 实现点击按钮切换图片的效果

接下来，我们需要实现点击左右箭头切换图片的效果。这可以通过绑定事件来实现，以下是实现代码：

var prevBtn = document.querySelector('.slider-control.prev');
var nextBtn = document.querySelector('.slider-control.next');

prevBtn.addEventListener('click', function() {
  clearInterval(timer);
  index--;
  if (index < 0) {
    index = len - 1;
  }
  slideTo(index);
  timer = setInterval(slideNext, 3000);
});

nextBtn.addEventListener('click', function() {
  clearInterval(timer);
  index++;
  if (index >= len) {
    index = 0;
  }
  slideTo(index);
  timer = setInterval(slideNext, 3000);
});

该代码中主要做的事情是：

获取左箭头和右箭头.slider-control；
为左箭头绑定一个点击事件prevBtn.addEventListener('click', function() { ... });；
为右箭头绑定一个点击事件nextBtn.addEventListener('click', function() { ... });；
点击左箭头需要暂停自动播放，并且将当前显示的图片索引index减1，如果小于0则重置为最大索引值；接着执行slideTo(index)将图片显示到指定位置，并重新启动自动播放。右箭头同理。

2.5 实现点击数字按钮跳转到相应图片的效果

上述代码中，我们已经实现了自动播放和点击箭头切换图片的效果。但是，还需要实现点击数字按钮跳转到相应图片的效果。与点击箭头切换图片类似，也是绑定一个点击事件来实现，以下是实现代码：

[].forEach.call(navItems, function(navItem, i) {
  navItem.addEventListener('click', function() {
    clearInterval(timer);
    index = i;
    slideTo(index);
    timer = setInterval(slideNext, 3000);
  });
});

该代码主要做的事情是：

使用[].forEach.call遍历所有数字按钮；
对于每个按钮，绑定一个点击事件navItem.addEventListener('click', function() { ... });；
点击数字按钮需要暂停自动播放，并且将当前显示的图片索引index设置为该按钮的索引i；接着执行slideTo(index)将图片滑动到指定位置，并重新启动自动播放。

2.6 实现鼠标悬停时轮播停止的效果

最后一个需求是实现当鼠标悬停在轮播图上时，自动轮播停止，离开时继续轮播的效果。这也可以通过绑定事件来实现，实现代码如下：

var slider = document.querySelector('.slider');

slider.addEventListener('mouseover', function() {
  clearInterval(timer);
});

slider.addEventListener('mouseout', function() {
  timer = setInterval(slideNext, 3000);
});

该代码中主要做的事情是：

获取轮播图容器.slider；
为.slider绑定一个鼠标悬停事件slider.addEventListener('mouseover', function() { ... });；
为.slider绑定一个鼠标离开事件slider.addEventListener('mouseout', function() { ... });；
鼠标悬停在轮播图上时，需要暂停自动轮播；离开时，重新启动自动轮播。

这样就完成了所有的需求。

三、示例说明

下面简单介绍两个示例：

示例一

示例一是一个基本版的轮播图，将所有代码放在一个完整的HTML文件中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS原生轮播图示例</title>
  <style>
    .slider {
      position: relative;
      width: 100%;
      height: 400px;
    }

    .slider-wrapper {
      width: 300%;
      height: 400px;
      position: relative;
      left: 0;
      transition: left .5s;
    }

    .slider-item {
      float: left;
      width: 33.3333%;
      height: 400px;
      text-align: center;
      font-size: 40px;
      color: #fff;
      background-color: #000;
    }

    .slider-item img {
      max-width: 100%;
      max-height: 100%;
    }

    .slider-nav {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      padding: 0;
      list-style: none;
      z-index: 1;
    }

    .slider-nav-item {
      display: inline-block;
      margin-right: 10px;
      border: 2px solid #fff;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
      color: #fff;
      cursor: pointer;
    }

    .slider-nav-item.active {
      background-color: #fff;
      color: #000;
    }

    .slider-control {
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background-color: #fff;
      cursor: pointer;
      z-index: 1;
    }

    .slider-control.prev {
      left: 20px;
    }

    .slider-control.next {
      right: 20px;
    }
  </style>
</head>
<body>
  <div class="slider">
    <div class="slider-wrapper">
      <div class="slider-item"><img src="https://picsum.photos/800/400?image=1"></div>
      <div class="slider-item"><img src="https://picsum.photos/800/400?image=2"></div>
      <div class="slider-item"><img src="https://picsum.photos/800/400?image=3"></div>
    </div>
    <ul class="slider-nav">
      <li class="slider-nav-item active">1</li>
      <li class="slider-nav-item">2</li>
      <li class="slider-nav-item">3</li>
    </ul>
    <a class="slider-control prev"></a>
    <a class="slider-control next"></a>
  </div>

  <script>
    var timer = null;
    var index = 0;
    var items = document.querySelectorAll('.slider-item');
    var len = items.length;
    var navItems = document.querySelectorAll('.slider-nav-item');

    function slideNext() {
      index++;
      if (index >= len) {
        index = 0;
      }
      slideTo(index);
    }

    function slideTo(i) {
      var offset = -i * 100 / len;
      document.querySelector('.slider-wrapper').style.left = offset + '%';
      setActiveNav(i);
    }

    function setActiveNav(i) {
      [].forEach.call(navItems, function(navItem) {
        navItem.classList.remove('active');
      });
      navItems[i].classList.add('active');
    }

    var prevBtn = document.querySelector('.slider-control.prev');
    var nextBtn = document.querySelector('.slider-control.next');

    prevBtn.addEventListener('click', function() {
      clearInterval(timer);
      index--;
      if (index < 0) {
        index = len - 1;
      }
      slideTo(index);
      timer = setInterval(slideNext, 3000);
    });

    nextBtn.addEventListener('click', function() {
      clearInterval(timer);
      index++;
      if (index >= len) {
        index = 0;
      }
      slideTo(index);
      timer = setInterval(slideNext, 3000);
    });

    [].forEach.call(navItems, function(navItem, i) {
      navItem.addEventListener('click', function() {
        clearInterval(timer);
        index = i;
        slideTo(index);
        timer = setInterval(slideNext, 3000);
      });
    });

    var slider = document.querySelector('.slider');

    slider.addEventListener('mouseover', function() {
      clearInterval(timer);
    });

    slider.addEventListener('mouseout', function() {
      timer = setInterval(slideNext, 3000);
    });

    timer = setInterval(slideNext, 3000);
  </script>
</body>
</html>

示例二

示例二是一个稍微复杂一些的轮播图，将JS代码单独拆分成一个文件，并添加了一些CSS3动画效果。

首先，创建一个index.html文件，代码如下：

```html

JS原生轮播图示例

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS原生手写轮播图效果 - Python技术站

css web

0 0 打赏

微信扫一扫

支付宝扫一扫

CSS实现3D书本效果的示例代码

上一篇 2023年6月10日

深入挖掘Windows脚本技术

下一篇 2023年6月10日

浅谈styled-components的用法

浅谈styled-components的用法什么是styled-components styled-components 是 React 应用程序中使用的一种 CSS-in-JS 库。这意味着您可以在组件中编写 CSS，而不是在样式表文件中编写 CSS。这可以防止 CSS 的样式冲突问题，使得代码易于理解和维护。除此之外，styled-components…

css 2023年6月9日
000
div水平布局两边对齐的三种实现方法

下面详细讲解“div水平布局两边对齐的三种实现方法”的攻略。前言当我们需要实现一个水平布局时，往往有一个常见的需求，就是让该布局的左右两边对齐。这时我们可以使用三种不同的方法来实现此种布局需求。方法一：float实现首先我们来看第一种方法，它是使用float属性来实现两侧布局对齐的，主要步骤如下：对布局中需要对齐的div元素设置float:left…

css 2023年6月10日
000
Python&Matlab实现炫酷的3D旋转图

下面是“Python&Matlab实现炫酷的3D旋转图”的完整攻略：一、前置知识在学习“Python&Matlab实现炫酷的3D旋转图”之前，需要掌握以下基础知识： Python或Matlab语言基础； NumPy、Matplotlib等数据和图形绘制库的使用； 3D坐标系的概念和表示方法；常用的3D向量操作，如向量叉乘、点乘等。同时…

css 2023年6月10日
000
web前端之css水平居中代码解析

Web前端之CSS水平居中代码解析在Web前端开发中，我们经常需要将数据、元素进行居中显示，其中水平居中是一种常见的需求。下面我们将详细讲解如何使用CSS实现水平居中。水平居中的实现方式使用text-align属性 text-align属性用于设置元素中的文本内容对齐方式，也可以用于设置元素内部其它元素的对齐方式。我们可以将父级元素的text-alig…

css 2023年6月9日
000
JSChart轻量级图形报表工具(内置函数中文参考)

JSChart是一款轻量级的图形报表工具，支持直线图、饼状图、柱状图等多种图表类型，并且提供了丰富的配置选项，使用户能够灵活地定制图表样式。 JSChart的安装与引用 JSChart支持直接下载文件并引入到项目中，或者使用npm进行安装。 <!– 引入JSChart文件 –> <script src="jschart.js&…

css 2023年6月10日
000
CSS圆形旋转效果纯CSS制作圆形旋转菜单效果(七步完成)

下面是详细解释该攻略的每一步骤： 1. 创建HTML结构将需要的菜单项通过<ul>和<li>标签创建出来，代码示例如下： <ul class="menu"> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</l…

css 2023年6月9日
000
php中去除所有js,html,css代码

为了去除PHP字符串中的所有JS，HTML和CSS代码，可以使用以下步骤：使用PHP内置的strip_tags()函数：该函数可以用来删除字符串中的HTML和PHP标记。例如，以下代码从字符串中删除所有HTML和PHP标记，并输出结果： <?php $string = "<p>This is a <strong>sa…

css 2023年6月9日
000
javascript获取元素CSS样式代码示例

获取元素CSS样式是在Web开发中常见的需求，JavaScript可以很好地完成这个任务。下面是获取元素CSS样式的完整攻略。第一步：获取元素对象在JavaScript中获取元素对象有多种方法，比较常用的有以下几种： 1. document.getElementById(id) 此方法可以直接通过元素ID获取元素对象，示例代码如下： var elemen…

css 2023年6月10日
000