本文展示了如何使用JavaScript、HTML和CSS创建一个自动轮播的图片展示，并实现了鼠标移入移出的控制以及通过点击左右箭头和小圆点切换图片的功能。同时，利用事件委托优化了代码，提高了效率。文章详细解析了各个部分的实现逻辑，包括图片的切换动画、焦点指示器的更新以及自动轮播的控制。
页面打开自动轮播，鼠标移入图片区域取消自动轮播
点击左右箭头切换图片
点击下方小圆点切换图片
一、
HTML
<div id="div1">
<ul>
<li class="ac">
<a href="javascript:;">
<img src="../images/1.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/2.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/3.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/4.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/5.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/6.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/7.jpg" />
</a>
</li>
<li>
<a href="javascript:;">
<img src="../images/8.jpg" />
</a>
</li>
</ul>
<ol>
<li class="ac">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
<a href="javascript:;" id="goPrev">«</a>
<a href="javascript:;" id="goNext">»</a>
</div>
CSS
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#div1 {
width: 850px;
height: 500px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#div1 ul li {
height: 500px;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 0;
transition: opacity 1.5s;
}
#div1 ul li.ac {
z-index: 5;
opacity: 1;
}
#div1 ol {
position: absolute;
right: 10%;
bottom: 10px;
z-index: 6
}
#div1 ol li {
width: 20px;
height: 20px;
background: #fff;
margin-left: 5px;
float: left;
line-height: 20px;
text-align: center;
cursor: pointer;
}
#div1 ol li.ac {
background: red;
color: #fff;
}
#div1>a {
text-decoration: none;
position: absolute;
top: 50%;
margin-top: -10px;
height: 40px;
line-height: 32px;
text-align: center;
width: 40px;
font-size: 40px;
vertical-align: middle;
color: #fff;
background: rgba(0, 0, 0, 0.5);
z-index: 6;
}
#goPrev {
left: 0;
}
#goNext {
right: 0;
}
img {
width: 850px;
height: 500px;
}
</style>
JS
1、普通方法
//获取元素
let box = document.querySelector('#div1');//最外层盒子
let imgLi = document.querySelectorAll('ul>li');//所有图片的li
let numLi = document.querySelectorAll('ol>li');//所有下标的li
let lastBtn = document.querySelector('#goPrev');//点击去上一张
let nextBtn = document.querySelector('#goNext');//点击去下一张
//设置上一张图的索引(要消失的图)
let lastIndex = 0;
//设置当前图片的索引(要出现的图)
let index = 0;
//单击去上一张按钮时
lastBtn.onclick = function () {
//将当前显示图片的下标赋值给上一张图片下标
lastIndex = index;
//当前图片下标-1，显示上一张图片
index--;
//设置下标-1边界，如果index小于0，index等于最大下标
if (index < 0) index = imgLi.length - 1;
changeImg();
}
//单击去下一张按钮时
nextBtn.onclick = function () {
//将当前显示图片的下标赋值给上一张图片下标
lastIndex = index;
//当前图片下标+1，显示下一张图片
index++;
//设置下标-1边界，如果index大于最大下标，index等于0
if (index > imgLi.length - 1) index = 0;
changeImg();
}
//单击下方数字时 使用事件委托
numLi.forEach((li, key) => {
li.onclick = function () {
lastIndex = index;
index = key;
changeImg();
}
})
//图片自动轮播
//设置计时器
let times = '';
//图片自动轮播函数
function autoPaly() {
times = setInterval(function () {
nextBtn.onclick();
}, 2000);
}
//图片自动轮播默认开启
autoPaly();
//鼠标移出事件 计时器开启
box.onmouseout = function () {
autoPaly();
}
//鼠标移入事件 计时器关闭
box.onmouseover = function () {
clearInterval(times);
}
//图片切换函数
function changeImg() {
//设置原本显示的图片和索引样式消失
document.querySelector('ul li.ac').className = '';
document.querySelector('ol li.ac').className = '';
//下一张图片和索引出现
imgLi[index].className = 'ac';
numLi[index].className = 'ac';
}
2、事件委托
//获取元素
let div = document.querySelector('#div1');//最大的盒子
let imgLi = document.querySelectorAll('ul>li');//所有的图片
let numLi = document.querySelectorAll('ol>li');//下方所有的数字
//设置上一张和当前图片的索引
let lastIndex = 0, index = 0;
//点击外面大盒子 事件委托
div.onclick = function (eve) {
eve = eve || window.event;
//点击的是去上一张按钮
if (eve.target.id == "goPrev") {
lastIndex = index;
index--;
index = index < 0 ? imgLi.length - 1 : index;
changeImg();
}
//点击的是去下一张按钮
if (eve.target.id == "goNext") {
// console.log('下一张');
lastIndex = index;
index++;
index = index > imgLi.length - 1 ? 0 : index;
changeImg();
}
//点击的是下方的数字
if (eve.target.parentNode.nodeName == 'OL') {
lastIndex = index;
index = eve.target.innerHTML - 1;
changeImg();
}
}
//自动轮播
//定义计时器
let times = '';
//自动轮播函数
function autoPaly() {
//自动轮播函数中设置计时器
times = setInterval(function () {
lastIndex = index;
index++;
index = index > imgLi.length - 1 ? 0 : index;
changeImg();
}, 2000);
}
//自动轮播函数默认调用
autoPaly();
//鼠标移入
div.onmouseover = function () {
//清空定时器
clearInterval(times);
}
//鼠标移出
div.onmouseout = function () {
//调用自动轮播函数
autoPaly();
}
//图片切换函数
function changeImg() {
document.querySelector('ul .ac').className = '';
document.querySelector('ol .ac').className = '';
imgLi[index].className = 'ac';
numLi[index].className = 'ac';
}
二
HTML
<div class="banner">
<!-- 图片区域 -->
<ul>
<li class="active"><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
<li><img src="../images/6.jpg" alt=""></li>
<li><img src="../images/7.jpg" alt=""></li>
<li><img src="../images/8.jpg" alt=""></li>
</ul>
<!-- 焦点区域 -->
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 左右切换按钮 -->
<div class="left"><</div>
<div class="right">></div>
</div>
CSS
<style>
* {
margin: 0;
padding: 0;
}
ul,
li,
ol {
list-style: none;
}
img {
width: 100%;
height: 100%;
display: block;
}
.banner {
width: 100%;
height: 700px;
position: relative;
margin: 50px auto;
}
.banner>ul {
width: 100%;
height: 100%;
position: relative;
}
.banner>ul>li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 2s linear;
}
.banner>ul>li.active {
opacity: 1;
}
.banner>ol {
width: 200px;
height: 30px;
position: absolute;
left: 30px;
bottom: 30px;
background-color: aqua;
opacity: 0.5;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 15px;
}
.banner>ol>li {
width: 20px;
height: 20px;
background-color: blueviolet;
border-radius: 50%;
cursor: pointer;
}
.banner>ol>li.active {
background-color: purple;
}
.banner>div {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(127, 255, 212, 0.5);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
}
.banner>div.left {
left: 0;
}
.banner>div.right {
right: 0;
}
</style>
JS
//获取最大的div盒子--父元素
var div = document.querySelector('.banner')
//获取图片
var img = document.querySelectorAll('ul>li');
//获取焦点按钮
var points = document.querySelectorAll('ol>li');
//获取左右按钮
var left = document.querySelector(".left");
var right = document.querySelector(".right");
//定义定时器需要执行的函数
function ChangeTimes () {
//让当前图片和焦点消失
img[index].className = '';
points[index].className = '';
index++;
//如果index大于图片数量
if (index >= img.length) {
//将图片和焦点的索引设为0
index = 0;
}
//加一的图片和焦点显示
img[index].className = 'active';
points[index].className = 'active';
}
//定义定时器
var times=setInterval(ChangeTimes,3000);
//鼠标移出
div.onmouseout=function(){
//开启定时器
times=setInterval(ChangeTimes,3000);
}
//鼠标移入 关闭定时器
div.onmouseover = function(){
clearInterval(times);
}
//给每一个焦点添加一个自定义属性，与图片li区分
for (var i = 0; i < points.length; i++) {
points[i].dataset.name = 'point';
points[i].dataset.id = i;
}
//设置变量，保存目前是第几张图片，默认为第0张
var index = 0;
function change(type) {
//当前图片消失
img[index].className = '';
points[index].className = '';
//type为true时表明点击的是右箭头，索引加一
if (type == true) {
index++
} else if (type == false) {//type为false时表明点击的是左箭头，索引减一
index--
} else {//如果不是true和false，则表明点击的是下方焦点，传递过来的是对应焦点的data-id,data-id与下标相同
index = type;//索引为下标
}
//如果index大于图片的数量
if (index >= img.length) {
index = 0;//索引设为0
}
//如果index为小于0
if (index < 0) {
index = img.length - 1;//s索引设为最后一张图片的下标
}
//显示选中的图片
img[index].className = 'active';
points[index].className = 'active';
}
//外面大盒子的点击事件 传递形参，显示
div.onclick = function (e) {
if (e.target.className == 'left') {//如果点击的是div里的class名为left的元素
change(false);//传递false，图片向左
}
if (e.target.className == 'right') {//如果点击的是div里的class名为right的元素
change(true);//传递false，图片向右
}
if (e.target.dataset.name == 'point') {//如果点击的是div里data-name为point(即下方焦点)
change(e.target.dataset.id);//传递焦点data-id属性值，跳转去指定图片
}
}
1788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
