本文档详细介绍了如何使用原生JavaScript实现一个包含鼠标悬停显示隐藏按钮、点击按钮和小圆圈切换图片、自动播放等功能的轮播图。包括动态生成小圆圈、无缝滚动、点击按钮图片滚动、自动播放轮播图等关键步骤的代码实现。
原生js手写轮播图
功能需求：
1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
2.点击右侧按钮一次，图片往左播放，以此类推，左侧按钮同理
3.图片播放的同时，下面小圆圈模块跟随一起变化
4.点击小圆圈，可以播放相应图片
5.鼠标不经过轮播图，轮播图也会自动播放图片
一：搭建结构
<!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>Document</title>
<link rel="stylesheet" href="./lbt.css/index.css">
</head>
<body>
<div class="main">
<!-- 左侧按钮 -->
<a href="#" class="left"><</a>
<!-- 右侧按钮 -->
<a href="#" class="right">></a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="./lbt.img/1.jpg" alt=""></a>
</li>
<!-- <li>
<a href="#"><img src="./lbt.img/2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./lbt.img/3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./lbt.img/4.jpg" alt=""></a>
</li> -->
</ul>
<!-- 小圆圈 -->
<ol class="circle">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
样式为
* {
padding: 0;
margin: 0;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
img {
width: 720px;
height: 455px;
}
.main {
position: relative;
width: 720px;
height: 455px;
background-color: pink;
margin: 0 auto;
margin-top: 50px;
}
.main ul {
width: 600%;
position: absolute;
left: 0;
right: 0;
}
.left {
position: absolute;
top: 50%;
width: 24px;
height: 40px;
background-color: rgb(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
z-index: 2;
}
.right {
position: absolute;
top: 50%;
right: 0;
width: 24px;
height: 40px;
background-color: rgb(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
z-index: 2;
}
.main ul li {
float: left;
}
.circle li {
float: left;
width: 8px;
height: 8px;
border: 2px solid orange;
border-radius: 50%;
margin: 0 3px;
/* 鼠标经过显示小手 */
cursor: pointer;
}
.current {
background-color: orange;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
二：功能模块实现
因为js文件较多，我们单度新建js文件夹，再建js文件，引入到页面中去
（1）先添加load事件
window.addEventListener('load', function() {
this.alert('1');
})
当页面弹出1的时候即添加成功
（2）开始进行需求模块
1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
//获取元素
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var main = document.querySelector('.main');
//鼠标经过显示隐藏的左右按钮
main.addEventListener('mouseenter', function() {
left.style.display = 'block';
right.style.display = 'block';
})
//鼠标离开隐藏左右按钮
main.addEventListener('mouseleave', function() {
left.style.display = 'none';
right.style.display = 'none';
})
2.动态生成小圆圈
核心思路：小圆圈的个数要和图片张数一致，所以首先的到ul里面的图片张数（图片放入li里面，所以就是li的个数），利用循环动态生成小圆圈（小圆圈放入ol里面）
var ul = main.querySelector('ul');
var ol = main.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
//创建一个小li
var li = document.createElement('li');
//把li插入到ol
ol.appendChild(li);
}
//把ol里面第一个类名设置为current类（改变圆圈底色）
ol.children[0].className = 'current';
3.点击哪个小圆圈哪个就改变底色
运用排他思想,生成小圆圈的时候直接绑定事件
li.addEventListener('click', function() {
//干掉所有人 把所有的小li清除current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
//留下我自己 当前的li设置current类名
})
4.点击小圆圈滚动图片
此时用到animate动画函数，将js文件引入（注意，因为index.js依赖animate.js,所以animate.js要写到index.js上面）
animate.js如下
function animate(obj, target, 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)
//回调函数写到定时器结束里面
//-------------------------------------------------------------
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
})
}
点击按钮图片移动原理：ul执行动画函数（ul添加定位才能执行）
移动图片核心算法：点击某个小圆圈，就让图片滚动的距离为当前圆圈的索引号乘以图片的宽度
自定义属性设置索引号
//记录索引号，通过自定义属性
li.setAttribute('index', i);
获取图片宽度(盒模型offsetWidth属性)
var mainwidth = main.offsetWidth;
获取当前li的索引号
var index = this.getAttribute('index')
调用动画函数，距离为上面算法公式所求
animate(ul, -index * mainwidth)
5.点击右侧按钮图片滚动一张
思想：声明一个变量num,点击一次自增1，再让着个变量乘以mainWidth，就是ul的滚动距离
（注：此时需要将mainWidth提升为全局变量）
//点击右侧按钮滚动一张
var num = 0;
right.addEventListener('click', function() {
num++;
animate(ul, -num * mainwidth);
})
6.实现无缝滚动
把ul的第一个li复制一份，放到ul的最后面
//克隆第一张图片（li）放到ul最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
当图片滚动到克隆的最后一张图片时，让ul快速的不做动画的跳到最左侧：left为0，同时num赋值为0，重新开始滚动
var num = 0;
right.addEventListener('click', function() {
//如果走到了最后一张复制的图片，此时ul要快速复原：left改为0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * mainwidth);
})
7.小圆圈跟随右侧按钮变化
声明一个全局变量circle，每次点击自增1
circle++;
if (circle == ol.children.length) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
8.点击左侧按钮图片进行滚动
原理同上
left.addEventListener('click', function() {
if (num == 0) {
ul.style.left = -(ul.children.length - 1) * mainwidth + 'px';
num = ul.children.length - 1;
}
num--;
animate(ul, -num * mainwidth);
circle--;
if (circle < 0) {
circle = ol.children.length - 1;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
9.自动播放轮播图（手动调用点击事件）
var timer=this.setInterval(function(){
right.click();
},2000);
鼠标放上去定时器停止，离开执行
main.addEventListener('mouseenter', function() {
clearInterval(timer);
timer = null; //清楚定时器变量
})
//鼠标离开隐藏左右按钮
main.addEventListener('mouseleave', function() {
timer = this.setInterval(function() {
right.click();
}, 2000);
})
完整js代码如下
window.addEventListener('load', function() {
//获取元素
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var main = document.querySelector('.main');
var mainwidth = main.offsetWidth;
//鼠标经过显示隐藏的左右按钮
main.addEventListener('mouseenter', function() {
left.style.display = 'block';
right.style.display = 'block';
clearInterval(timer);
timer = null; //清楚定时器变量
})
//鼠标离开隐藏左右按钮
main.addEventListener('mouseleave', function() {
left.style.display = 'none';
right.style.display = 'none';
timer = this.setInterval(function() {
right.click();
}, 2000);
})
//动态生成小圆圈
var ul = main.querySelector('ul');
var ol = main.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() {
//干掉所有人 把所有的小li清除current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
//留下我自己 当前的li设置current类名
//点击小圆圈移动图片
//点击li获取当前索引号
var index = this.getAttribute('index');
num = index;
circle = index;
//获取宽度
animate(ul, -index * mainwidth)
})
}
//把ol里面第一个类名设置为current类
ol.children[0].className = 'current';
//克隆第一张图片（li）放到ul最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//点击右侧按钮滚动一张
var num = 0;
//circle控制小圆圈的播放
var circle = 0;
right.addEventListener('click', function() {
//如果走到了最后一张复制的图片，此时ul要快速复原：left改为0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * mainwidth);
circle++;
if (circle == ol.children.length) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//左侧按钮
left.addEventListener('click', function() {
if (num == 0) {
ul.style.left = -(ul.children.length - 1) * mainwidth + 'px';
num = ul.children.length - 1;
}
num--;
animate(ul, -num * mainwidth);
circle--;
if (circle < 0) {
circle = ol.children.length - 1;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//自动播放
var timer = this.setInterval(function() {
right.click();
}, 2000);
})
扫一扫
2292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
