js制作轮播图效果

下面是详细讲解“js制作轮播图效果”的完整攻略:

1. 确定需求

首先确定需求,也就是轮播图的要求。比如需要自动播放、可以手动切换、需要圆点分页器等等。根据不同的需求,我们会采用不同的实现方法。

在这里,我们暂定轮播图的基本要求为:自动播放、手动切换、圆点分页器。

2. HTML结构

根据需求,确定好HTML结构的基本框架,比如轮播图盒子、轮播图图片、圆点分页器等等。在本例中,HTML结构如下:

<div id="slider">
  <ul class="slider-img">
    <li><img src="img/1.jpg" alt="轮播图1"></li>
    <li><img src="img/2.jpg" alt="轮播图2"></li>
    <li><img src="img/3.jpg" alt="轮播图3"></li>
    <li><img src="img/4.jpg" alt="轮播图4"></li>
  </ul>
  <ul class="slider-nav">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

其中,slider为轮播图盒子,slider-img为轮播图图片列表,slider-nav为圆点分页器,active为当前选中的圆点。

3. CSS样式

编写CSS样式,使轮播图可以正常显示。在本例中,CSS样式如下:

#slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.slider-img {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 2400px;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-img li {
  float: left;
  width: 600px;
  height: 400px;
}

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

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

.slider-nav li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #999;
  margin-right: 10px;
  float: left;
  cursor: pointer;
}

.slider-nav li.active {
  background-color: #ff6600;
}

4. JavaScript实现

4.1 自动播放

思路:定义一个变量index用于记录当前显示的图片索引,定义一个函数showNext用于切换下一张图片,定义一个定时器timer,每隔一定的时间执行showNext()

实现代码:

var index = 0;
var timer = null;

function showNext() {
  index++;
  if (index >= 4) {
    index = 0;
  }
  var imgList = document.querySelectorAll(".slider-img li");
  var navList = document.querySelectorAll(".slider-nav li");
  for (var i = 0; i < imgList.length; i++) {
    imgList[i].style.display = "none";
    navList[i].classList.remove("active");
  }
  imgList[index].style.display = "block";
  navList[index].classList.add("active");
}

timer = setInterval(showNext, 2000);

4.2 手动切换

思路:给圆点分页器绑定click事件,在事件中获取当前圆点的索引,然后将index设置为当前索引,调用showNext()函数。

实现代码:

var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < navList.length; i++) {
  navList[i].addEventListener("click", function() {
    var index = Array.prototype.indexOf.call(navList, this);
    var imgList = document.querySelectorAll(".slider-img li");
    for (var i = 0; i < imgList.length; i++) {
      imgList[i].style.display = "none";
      navList[i].classList.remove("active");
    }
    imgList[index].style.display = "block";
    navList[index].classList.add("active");
  });
}

5. 完整代码及示例

HTML代码:

<div id="slider">
  <ul class="slider-img">
    <li><img src="img/1.jpg" alt="轮播图1"></li>
    <li><img src="img/2.jpg" alt="轮播图2"></li>
    <li><img src="img/3.jpg" alt="轮播图3"></li>
    <li><img src="img/4.jpg" alt="轮播图4"></li>
  </ul>
  <ul class="slider-nav">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS代码:

#slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.slider-img {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 2400px;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-img li {
  float: left;
  width: 600px;
  height: 400px;
}

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

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

.slider-nav li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #999;
  margin-right: 10px;
  float: left;
  cursor: pointer;
}

.slider-nav li.active {
  background-color: #ff6600;
}

JavaScript代码:

var index = 0;
var timer = null;

function showNext() {
  index++;
  if (index >= 4) {
    index = 0;
  }
  var imgList = document.querySelectorAll(".slider-img li");
  var navList = document.querySelectorAll(".slider-nav li");
  for (var i = 0; i < imgList.length; i++) {
    imgList[i].style.display = "none";
    navList[i].classList.remove("active");
  }
  imgList[index].style.display = "block";
  navList[index].classList.add("active");
}

timer = setInterval(showNext, 2000);

var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < navList.length; i++) {
  navList[i].addEventListener("click", function() {
    var index = Array.prototype.indexOf.call(navList, this);
    var imgList = document.querySelectorAll(".slider-img li");
    for (var i = 0; i < imgList.length; i++) {
      imgList[i].style.display = "none";
      navList[i].classList.remove("active");
    }
    imgList[index].style.display = "block";
    navList[index].classList.add("active");
  });
}

实例1:点击查看

实例2:点击查看

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js制作轮播图效果 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js实现复制功能(多种方法集合)

    JS实现复制功能(多种方法集合) 复制(Copy)功能指的是将一个文本或者图片等资源从一个位置通过“复制”的方式再次拷贝到另一个位置,被复制的资源不会在原位置上被删除或移动,只是将其拷贝到了新的位置,从而实现了重复利用资源的目的。 在Web前端开发中,复制功能也是很常见的一个需求,如点击时自动复制某段文本、在表单中粘贴内容等功能。本文将介绍几种实现复制功能的…

    JavaScript 2023年6月11日
    00
  • 在JS中如何把毫秒转换成规定的日期时间格式实例

    为了将毫秒转化为规定格式的日期时间,我们需要使用JavaScript中内置的Date对象以及Date对象自带的各种方法,下面是具体的攻略。 一、使用Date对象的toLocaleString()方法 最简单的将毫秒转化为规定格式的日期时间的方法是使用Date对象的toLocaleString()方法。这个方法可以根据用户的本地时间格式自动将时间转化为字符串。…

    JavaScript 2023年5月27日
    00
  • 详解JavaScript数组过滤相同元素的5种方法

    详解JavaScript数组过滤相同元素的5种方法 在实际应用中,我们经常会使用数组来存储一些数据。有时候我们需要从这些数据中快速过滤出相同元素,这时候就需要用到数组去重的方法。本文将详细介绍5种常见的JavaScript数组去重方法。 1.使用Set ES6中新增了Set对象,可以帮我们去掉数组中的重复项。我们将数组转换为Set对象,再把Set对象转换回数…

    JavaScript 2023年5月27日
    00
  • 一个简单的JS时间控件示例代码(JS时分秒时间控件)

    下面是关于“一个简单的JS时间控件示例代码(JS时分秒时间控件)”的完整攻略。 1.概述 一个简单的JS时间控件,常见于某些表单页面,提供给用户选择时间的功能。这个示例的特点在于,它只显示时分秒,并按照24小时制呈现。 2.示例说明 下面以两个示例说明这个JS时间控件的用法。 2.1 示例1:基本用法 代码如下: <!DOCTYPE html> …

    JavaScript 2023年5月27日
    00
  • js中split函数的使用方法说明

    下面是“js中split函数的使用方法说明”的完整攻略。 什么是split函数 split函数是JavaScript中的一个字符串方法,主要用于将一个字符串根据指定的分隔符,切割成一个字符串数组。 其语法如下: string.split(separator, limit); 其中,separator代表指定的分隔符,可以是一个字符串或一个正则表达式;limi…

    JavaScript 2023年5月27日
    00
  • javascript限制用户只能输汉字中文的方法

    要限制用户只能输入汉字中文,可以在JavaScript中使用正则表达式来检查用户输入的文本字符。以下是可以用来实现此目的的JavaScript代码: // 使用正则表达式检查文本中是否包含非中文字符 function isChinese(str) { var regex = /^[\u4E00-\u9FA5]+$/; // 匹配所有汉字 return reg…

    JavaScript 2023年5月19日
    00
  • uniapp实现人脸识别功能的具体实现代码

    实现人脸识别功能需要用到Uniapp的uni plugins插件,其中uni.plugins.facedetect插件可以用于实现人脸识别。 下面是实现人脸识别的代码示例: 引入uni.plugins.facedetect插件 import faceDetect from ‘@/uni_modules/facedetect/js_sdk/face_detec…

    JavaScript 2023年5月19日
    00
  • js中字符替换函数String.replace()使用技巧

    下面是关于 “js中字符替换函数String.replace()使用技巧” 的详细解释: 1. String.replace() 的基本语法 在 JavaScript 中,String.replace() 函数用于替换字符串中的特定字符或模式。它的基本语法如下: string.replace(searchValue, replaceValue) 其中,str…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部