在本文中我们将使用Jquery库来实现一个简单的轮播图效果。
基本功能:
1.打开页面,图片会自动轮播。
2.鼠标悬浮到图片上时会暂停轮播。
2.左右两侧箭头点击可以左右切换图片。
3.下方圆点点击可以切换图片,圆点点击变色。
准备工作
打开vscode,新建html文件,shift+1后按回车,效果如下图所示。
之后在title标签下面添加script标签,标签中添加src属性引入Jquery文件。src中的地址根据自己文件地址修改。(一定别忘了要引入文件)
之后再准备几张图片放在同目录的文件夹里方便引入。
下面就开始对HTML+CSS+Jquery进行配置。
HTML配置:
<div class="box">
<ul>
<li class="choose" index="0"></li>
<li index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
</ul>
<div class="left"><span>
< </span>
</div>
<div class="right"><span> > </span></div>
</div>
box就是我们放轮播图的地方了。
ul里面放的是用于点击切换的小圆点,至于li里面的属性index的用处,我们之后再说。
最后的left和right就是用于左右切换的左右箭头了。
CSS文件配置:
本文中使用的是内部样式表,记得要把这些配置包裹在<head></head>里面。
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 850px;
height: 350px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
background-image: url(./images/0.jpeg);//url里面的图片路径记得改成自己的
background-size: cover;
transition: all .5s ease-in-out;
}
img {
width: 100%;
height: 100%;
}
.left {
position: absolute;
top: 50%;
font-size: 40px;
}
.right {
position: absolute;
top: 50%;
right: 0px;
font-size: 40px;
}
ul {
position: absolute;
display: flex;
flex-direction: row;
width: 400px;
height: 50px;
top: 90%;
left: 50%;
}
ul li {
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
margin: 10px;
}
.choose {
background-color: red;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 10px;
}
</style>
Jquery配置:
$(document).ready(function() {
var $box = $('.box');
var $left = $('.left');
var $right = $('.right');
var $ul = $('ul');
var $lis = $ul.children('li');
/*
$('.box'):选择类名为box的元素,并赋值给变量$box。
$('.left'):选择类名为left的元素,并赋值给变量$left。
$('.right'):选择类名为right的元素,并赋值给变量$right。
$('ul'):选择<ul>元素,并赋值给变量$ul。
$ul.children('li'):选择<ul>元素下的所有<li>子元素,并赋值给变量$lis。
*/
var idx = 0;
var timer;
var imgs = ['./images/0.jpeg', './images/1.jpeg', './images/2.jpeg', './images/3.jpeg', './images/4.jpeg'];
/*
idx = 0:初始化图片索引变量idx为0,表示当前显示的图片索引。
timer:声明一个变量timer,用于存储定时器的ID。
imgs:定义一个包含所有图片路径的数组imgs。图片里的路径记得要自己更改!
*/
// 开始定时器,每隔1500毫秒调用一次changeBg函数
function startInterval() {
timer = setInterval(function () {
changeBg();
}, 1500);
}
// 改变背景图片和选中状态
function changeBg() {
idx++;
idx = idx == 5 ? 0 : idx;
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
$lis.removeClass('choose');
$lis.eq(idx).addClass('choose');
}
startInterval();
// 点击左侧按钮时,切换到上一张图片
$left.on('click', function () {
idx--;
idx = idx == -1 ? 4 : idx;
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
$lis.removeClass('choose');
$lis.eq(idx).addClass('choose');
});
// 点击右侧按钮时,切换到下一张图片
$right.on('click', function () {
changeBg();
});
// 点击列表项时,切换到对应的图片
$ul.on('click', 'li', function (e) {
var targetIdx = parseInt($(this).attr('index'));
idx = targetIdx;
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
$lis.removeClass('choose');
$lis.eq(idx).addClass('choose');
});
// 鼠标悬停在box上时,改变光标样式并清除定时器
$box.on('mouseover', function () {
$box.css('cursor', 'pointer');
clearInterval(timer);
});
// 鼠标离开box时,重新启动定时器
$box.on('mouseout', function () {
startInterval();
});
});
这是对函数changeBg()的解释
-
idx++;
- 这行代码将变量
idx
的值增加1。idx
是一个计数器,用于跟踪当前显示的图片索引。
- 这行代码将变量
-
idx = idx == 5 ? 0 : idx;
- 这是一个三元运算符,用于检查
idx
是否等于5。如果idx
等于5,则将其重置为0;否则,保持idx
的值不变。这是为了确保图片索引在达到最大值(5)时能够循环回到起点(0)。
- 这是一个三元运算符,用于检查
-
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
- 这行代码使用 jQuery 的
.css()
方法来更改.box
元素的背景图片。它根据当前的idx
值动态生成图片路径,并将其设置为背景图片。
- 这行代码使用 jQuery 的
-
$lis.removeClass('choose');
- 这行代码移除所有
<li>
元素的choose
类。choose
类用于标识当前选中的图片指示器。
- 这行代码移除所有
-
$lis.eq(idx).addClass('choose');
- 这行代码将当前索引
idx
对应的<li>
元素添加choose
类。这样,图片指示器中对应的圆点会被高亮显示,表示当前显示的图片。
- 这行代码将当前索引
还有对于ul的点击事件解释
-
获取目标索引值
var targetIdx = parseInt($(this).attr('index'));
$(this).attr('index')
:获取当前点击的列表项(<li>
)的index
属性值。parseInt(...)
:将获取到的字符串类型的index
值转换为整数。
-
更新当前索引值
idx = targetIdx;
- 将全局变量
idx
更新为刚刚获取到的目标索引值targetIdx
。
- 将全局变量
-
更新背景图片
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
- 使用 jQuery 的
.css()
方法,将.box
元素的背景图片设置为对应索引的图片路径。
- 使用 jQuery 的
-
移除所有列表项的选中状态
$lis.removeClass('choose');
- 使用 jQuery 的
.removeClass()
方法,移除所有列表项(<li>
)的choose
类。
- 使用 jQuery 的
-
添加当前列表项的选中状态
$lis.eq(idx).addClass('choose');
- 使用 jQuery 的
.eq()
方法,选择索引为idx
的列表项。 - 使用
.addClass()
方法,为该列表项添加choose
类,表示选中状态。
- 使用 jQuery 的
全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 850px;
height: 350px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
background-image: url(./images/0.jpeg);
background-size: cover;
transition: all .5s ease-in-out;
}
img {
width: 100%;
height: 100%;
}
.left {
position: absolute;
top: 50%;
font-size: 40px;
}
.right {
position: absolute;
top: 50%;
right: 0px;
font-size: 40px;
}
ul {
position: absolute;
display: flex;
flex-direction: row;
width: 400px;
height: 50px;
top: 90%;
left: 50%;
}
ul li {
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
margin: 10px;
}
.choose {
background-color: red;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="choose" index="0"></li>
<li index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
</ul>
<div class="left"><span>
< </span>
</div>
<div class="right"><span> > </span></div>
</div>
<script>
$(document).ready(function() {
var $box = $('.box');
var $left = $('.left');
var $right = $('.right');
var $ul = $('ul');
var $lis = $ul.children('li');
var idx = 0;
var timer;
var imgs = ['./images/0.jpeg', './images/1.jpeg', './images/2.jpeg', './images/3.jpeg', './images/4.jpeg'];
function startInterval() {
timer = setInterval(function () {
changeBg();
}, 1500);
}
function changeBg() {
idx++;
idx = idx == 5 ? 0 : idx;
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
$lis.removeClass('choose');
$lis.eq(idx).addClass('choose');
}
startInterval();
$left.on('click', function () {
idx--;
idx = idx == -1 ? 4 : idx;
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
$lis.removeClass('choose');
$lis.eq(idx).addClass('choose');
});
$right.on('click', function () {
changeBg();
});
$ul.on('click', 'li', function (e) {
var targetIdx = parseInt($(this).attr('index'));
idx = targetIdx;
$box.css('background-image', "url(./images/" + idx + ".jpeg)");
$lis.removeClass('choose');
$lis.eq(idx).addClass('choose');
});
$box.on('mouseover', function () {
$box.css('cursor', 'pointer');
clearInterval(timer);
});
$box.on('mouseout', function () {
startInterval();
});
});
</script>
</body>
</html>