html+css+jquery实现轮播图自动切换、左右切换、点击切换

news/发布时间2024/5/19 14:41:31

pc端也好、移动端也好，轮播图很常见，今天用html+css+jquery实现小米商城轮播图，套UI框架更容易实现

在这里插入图片描述

步骤1：把静态轮播图用div+css布局出来，采用盒子模型、相对绝对定位实现

代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {height: 460px;width: 1000px;position: relative;}.box-img {position: absolute;left: 0;top: 0;}.box-img img {height: 460px;width: 1000px;}/*左右切换*/.box-left {position: absolute;left: 0;top: 195px;width: 35px;height: 70px;border-radius: 0 5px 5px 0;text-align: center;line-height: 70px;font-size: 27px;color: #b0afad;}.box-left:hover {background-color: #777777;color: #ffffff;}.box-right {position: absolute;right: 0;top: 195px;width: 35px;height: 70px;border-radius: 5px 0 0 5px;text-align: center;line-height: 70px;font-size: 27px;color: #b0afad;}.box-right:hover {background-color: #777777;color: #ffffff;}/*圆点*/.box-dot {position: absolute;right: 50px;bottom: 20px;}.box-dot ul {list-style: none;padding: 0;margin: 0;}.box-dot ul li {width: 14px;height: 14px;border-radius: 100%;background-color: #4a5460;float: left;margin-right: 10px;}.box-dot ul li:hover, .box-dot ul li:nth-child(1) {background-color: #ffffff;}</style>
</head>
<body>
<div class="box"><!-- 轮播图 --><div class="box-img"><img src="static/image/1.jpg"></div><div class="box-img"><img src="static/image/2.jpg"></div><div class="box-img"><img src="static/image/6.jpg"></div><div class="box-img"><img src="static/image/4.jpg"></div><div class="box-img"><img src="static/image/5.jpg"></div><div class="box-img"><img src="static/image/3.jpg"></div><!-- 左右切换 --><div class="box-left">&lt;</div><div class="box-right">&gt;</div><!-- 圆点 --><div class="box-dot"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</div>
</body>
</html>

效果如下图：
在这里插入图片描述

步骤2：实现轮播图自动切换

需要引入jquery；

<script src="static/js/jquery.min.js"></script>

定时器实现4s自动切换轮播图

<script>$(function () {var index = 0;setInterval(function () {$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);if ($(".box-img").length - 1 === index) {index = 0} else {index++;}}, 4000)})
</script>

.box-img {.../* 设置属性是否透明，0是透明，1是不透明 */opacity: 0;/* 过渡效果，延迟1.5s */transition: 1.5s;
}.box-img:nth-child(1) {/* 设置属性是否透明，0是透明，1是不透明，默认显示第一张轮播图 */opacity: 1;
}

完毕，轮播图能够自动切换了

步骤3：左右切换，左右点击事件手动切换

实现代码如下：

// 左右切换
$(".box-left").click(function () {// 点击左，index减1，减到最小时让成为最大if (index === 0) {index = $(".box-img").length - 1;} else {index--;}$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);
});
$(".box-right").click(function () {// 点击右，index加1，加到最大时让成为最小if (index === $(".box-img").length - 1) {index = 0;} else {index++;}$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);
});

到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。

优化后，自动切换和左右切换js代码如下：

<script>$(function () {var index = 0;var timer;// 自动切换function f() {var timer = setInterval(function () {$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);if ($(".box-img").length - 1 === index) {index = 0} else {index++;}}, 4000);}f();// 左右切换$(".box-left").click(function () {clearInterval(timer);// 点击左，index减1，减到最小时让成为最大if (index === 0) {index = $(".box-img").length - 1;} else {index--;}$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);f();});$(".box-right").click(function () {clearInterval(timer);// 点击右，index加1，加到最大时让成为最小if (index === $(".box-img").length - 1) {index = 0;} else {index++;}$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);f();});})
</script>

步骤4：点击切换，点击圆点事件手动切换

代码如下：

$(".btn").click(function () {clearInterval(timer);// 获取第几个圆点index = $(this).index()// alert(index)$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);$(".btn").css("background-color", "#4a5460");$(".btn").eq(index).css("background-color", "#ffffff");f();
});

自动切换、左右切换，其对应圆点背景色也设置成白色

html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {height: 460px;width: 1000px;position: relative;}.box-img {position: absolute;left: 0;top: 0;opacity: 0;transition: 1.5s;}.box-img:nth-child(1) {opacity: 1;}.box-img img {height: 460px;width: 1000px;}/*左右切换*/.box-left {position: absolute;left: 0;top: 195px;width: 35px;height: 70px;border-radius: 0 5px 5px 0;text-align: center;line-height: 70px;font-size: 27px;color: #b0afad;}.box-left:hover {background-color: #777777;color: #ffffff;}.box-right {position: absolute;right: 0;top: 195px;width: 35px;height: 70px;border-radius: 5px 0 0 5px;text-align: center;line-height: 70px;font-size: 27px;color: #b0afad;}.box-right:hover {background-color: #777777;color: #ffffff;}/*圆点*/.box-dot {position: absolute;right: 50px;bottom: 20px;}.box-dot ul {list-style: none;padding: 0;margin: 0;}.box-dot ul li {width: 14px;height: 14px;border-radius: 100%;background-color: #4a5460;float: left;margin-right: 10px;}.box-dot ul li:hover, .box-dot ul li:nth-child(1) {background-color: #ffffff;}</style>
</head>
<body>
<div class="box"><!-- 轮播图 --><div class="box-img"><img src="static/image/1.jpg"></div><div class="box-img"><img src="static/image/2.jpg"></div><div class="box-img"><img src="static/image/6.jpg"></div><div class="box-img"><img src="static/image/4.jpg"></div><div class="box-img"><img src="static/image/5.jpg"></div><div class="box-img"><img src="static/image/3.jpg"></div><!-- 左右切换 --><div class="box-left">&lt;</div><div class="box-right">&gt;</div><!-- 圆点 --><div class="box-dot"><ul><li class="btn"></li><li class="btn"></li><li class="btn"></li><li class="btn"></li><li class="btn"></li><li class="btn"></li></ul></div>
</div>
</body>
<script src="static/js/jquery.min.js"></script>
<script>$(function () {var index = 0;var timer;// 自动切换function f() {var timer = setInterval(function () {$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);$(".btn").css("background-color", "#4a5460");$(".btn").eq(index).css("background-color", "#ffffff");if ($(".box-img").length - 1 === index) {index = 0} else {index++;}}, 4000);}f();// 左右切换$(".box-left").click(function () {clearInterval(timer);// 点击左，index减1，减到最小时让成为最大if (index === 0) {index = $(".box-img").length - 1;} else {index--;}$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);$(".btn").css("background-color", "#4a5460");$(".btn").eq(index).css("background-color", "#ffffff");f();});$(".box-right").click(function () {clearInterval(timer);// 点击右，index加1，加到最大时让成为最小if (index === $(".box-img").length - 1) {index = 0;} else {index++;}$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);$(".btn").css("background-color", "#4a5460");$(".btn").eq(index).css("background-color", "#ffffff");f();});// 点击圆点切换轮播图$(".btn").click(function () {clearInterval(timer);// 获取第几个圆点index = $(this).index()// alert(index)$(".box-img").css("opacity", 0);$(".box-img").eq(index).css("opacity", 1);$(".btn").css("background-color", "#4a5460");$(".btn").eq(index).css("background-color", "#ffffff");f();});})
</script>
</html>