JavaScript实现简易轮播图最全代码解析(ES5)
作者：飒尔 发布时间：2024-04-16 10:40:22
标签：js,轮播图
本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码，供大家参考，具体内容如下
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5轮播图</title>
<style>
* {padding: 0;margin: 0;}
#wrapper {
position: relative;
margin: 50px auto;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper .content {
position: relative;
width: 100％;
height: 100％;
overflow: hidden;
}
#wrapper>.content>.imgs {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 6000px;
/*多留出一张图片的宽度！*/
list-style: none;
}
#wrapper>.content>.imgs li {
float: left;
margin: 0;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper>.content>.imgs>li img {
width: 100％;
height: 100％;
}
#wrapper>.content>.dots {
width: 163px;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 10px;
list-style: none;
}
#wrapper>.content>.dots li {
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50％;
margin-left: 10px;
cursor: pointer;
}
li.active {
background-color: white;
}
li.quiet {
background-color: #5a5a58;
}
.btns {
display: none;
}
.btns span {
position: absolute;
width: 25px;
height: 40px;
top: 50％;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.5;
cursor: pointer;
color: #fff;
background: black;
}
.btns .left {
left: 5px;
}
.btns .right {
left: 100％;
margin-left: -32px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="content">
<ul class="imgs">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
<li><img src="img/s3.jpg" /></li>
<li><img src="img/s4.jpg" /></li>
<li><img src="img/s5.jpg" /></li>
</ul>
<ul class='dots'></ul>
</div>
<div class="btns">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</body>
</html>
<script>
var wrapper = document.getElementById("wrapper");
var imgs = document.getElementsByClassName("imgs")[0];
var dots = document.getElementsByClassName("dots")[0];
var btns = document.getElementsByClassName("btns")[0];
var dotss = dots.children;
var len = imgs.children.length; //图片张数
var width = wrapper.offsetWidth; //每张图片的宽度
var rate = 15; //一张图片的切换速度， 单位为px
var times = 1; //切换速度的倍率
var timer = null; //初始化一个定时器
var imgSub = 0; //当前显示的图片下标
var dotSub = 0; //当前显示图片的小圆点下标
var temp;
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
// 根据图片数量添加相应的小圆点到文档片段中
for (let i = 0; i < len; i++) {
const dot = document.createElement("li");
dot.className = 'quiet';
// 先插入文档片段中
frag.appendChild(dot);
}
// 将小圆点片段统一插入到 DOM 结构中
dots.appendChild(frag)
// 第一个小圆点高亮显示
dots.children[0].className = "active";
// 滑动函数
function Roll(distance) { //参数distance：滚动的目标点（必为图片宽度的倍数）
clearInterval(imgs.timer); //每次运行该函数必须清除之前的定时器！
//判断图片移动的方向
var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
//设置定时器，每隔10毫秒，调用一次该匿名函数
imgs.timer = setInterval(function() {
//每一次调用滚动到的地方 (速度为 speed px/10 ms)
imgs.style.left = imgs.offsetLeft + speed + "px";
//距目标点剩余的px值
var leave = distance - imgs.offsetLeft;
/*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
if (Math.abs(leave) <= Math.abs(speed)) {
clearInterval(imgs.timer);
imgs.style.left = distance + "px";
}
}, 10);
}
/*克隆第一个li到列表末*/
imgs.appendChild(imgs.children[0].cloneNode(true));
function autoRun() {
imgSub++;
dotSub++;
if (imgSub > len) { //滚动完克隆项后
imgs.style.left = 0; //改变left至真正的第一项处
imgSub = 1; //从第二张开始显示
}
// 调用滚动函数，参数为该下标的滚动距离
Roll(-imgSub * width);
// 如果圆点下标已滚动到最后，则将下标重置为0
if (dotSub > len - 1) { //判断是否到了最后一个圆点
dotSub = 0;
}
// 循环修改所有圆点默认样式
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
// 给当前滚动到的圆点添加高亮样式
dotss[dotSub].className = "active";
}
// 创建定时器，开始自动滚动
timer = setInterval(autoRun,2000);
// 循环添加小圆点的触发事件
for (var i = 0; i < len; i++) {
dotss[i].index = i;
dotss[i].onmouseover = function() {
for (var j = 0; j < len; j++) {
dotss[j].className = "quiet";
}
this.className = "active";
temp = dotSub;
imgSub = dotSub = this.index;
times = Math.abs(this.index - temp); //距离上个小圆点的距离
rate = rate * times; //根据距离改变切换速率
Roll(-this.index * width);
rate = 15;
}
}
// 添加事件：鼠标移动到wrapper上，左右切换按钮显示
wrapper.onmouseover = function() {
clearInterval(timer);
btns.style.display = 'block';
}
// 添加事件：鼠标移出wrapper，左右切换按钮隐藏
wrapper.onmouseout = function() {
timer = setInterval(autoRun,2000);
btns.style.display = 'none';
}
// 点击上一张按钮 触发事件
btns.children[0].onclick = function() {
imgSub--;
dotSub--;
if (imgSub < 0) { //滚动完第一项后
imgs.style.left = -len * width + "px"; //改变left至克隆的第一项处
imgSub = dotSub = len - 1;
}
Roll(-imgSub * width);
if (dotSub < 0) {
dotSub = len - 1;
}
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
dotss[dotSub].className = "active";
}
// 点击下一张按钮 触发事件
btns.children[1].onclick = autoRun;
</script>
图片：
来源：https://blog.csdn.net/CSErtuh/article/details/120185804
0
投稿猜你喜欢
前言既然在Pathlib库中提到了glob()函数，那么我们就专门用一篇内容讲解文件名的匹配。其实我们有专门的一个文件名匹配库就叫：glob- 1.GO中包的定义与介绍go中包分为三种：1.系统内置包 2. 自定义包 3.第三方包2. 包管理工具 go mod2.1 自定义包 (可以
- 有这样一个要求，它要创建一个SQL Server查询，其中包括基于事件时刻的累计值。典型的例子就是一个银行账户，因为你每一次都是在不同的时间
- 密码规则：它至少包含 8 个字符，最多包含 20 个字符。它至少包含一个数字。它至少包含一个大写字母。它至少包含一个小写字母。它至少包含一个
- windows下vue-cli及webpack 构建网站(一)环境安装 windows下vue-cli及webpack 构建网站(
- 先看下object类中对__new__()方法的定义： class object: @staticm
- vue-element-admin中node-sass换成dart-sass，安装依赖报code 128等问题1、node-sass换成da
- 文章先介绍了关于俄罗斯方块游戏的几个术语。边框——由10*20个空格组成，方块就落在这里面。盒子——组成方块的其中小方块，是组成方块的基本单
- 本文较为深入的探究了php中in_array函数用法。分享给大家供大家参考。具体如下：今天突然想到php中的in_array函数有个其怪的用
- 前言相比常用的 os.path而言，pathlib 对于目录路径的操作更简介也更贴近 Pythonic。但是它不单纯是为了简化操作，还有更大
- 本文实例为大家分享了css+html+js实现五角星评分的具体代码，供大家参考，具体内容如下效果图：css：<style>&nb
- 一.图像金字塔原理上一篇文章讲解的图像采样处理可以降低图像的大小，本文将补充图像金字塔知识，了解专门用于图像向上采样和向下采样的pyrUp(
- 将图片放入到白色或黑色背景图中，前提是图片小于背景图片的尺寸，原图为如下，长为192，宽为64。1.将图片放入到白色背景图（224,224）
- 当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张
- 注意：自定义函数要放在项目应用目录/common/common.php中。 这里是关键。 模板变量的函数调用格式：{$varname|fun
- --程序员们在编写一个雇员报表，他们需要得到每个雇员当前及历史工资状态的信息， --以便生成报表。报表需要显示每个人的晋升日期和工资数目。
- 在一个大型数据库中，数据的更改是非常频繁的。 而建立在这些数据上的索引也是需要经常去维护的。 否则这这些数据索引就起不到起应起的作用。甚至会
- 本文实例讲述了Python全排列操作。分享给大家供大家参考，具体如下：step 1: 列表的全排列:这个版本比较low# -*-coding
- 本文实例讲述了python通过线程实现定时器timer的方法。分享给大家供大家参考。具体分析如下：这个python类实现了一个定时器效果，调
- Excel中的一些概念一个excel文件中可以包含多个sheet，一个sheet可以理解成一个表格表格的每一行称为 Row表格的每一行中的任
