您的位置：首页 > Web前端 > HTML

HTML轮播图

2020-08-11 15:20 274 查看

轮播图（HTML+CSS+JS）

学习JS过程中，学习了很多轮播图的实现方法，然后想到试着用操作某对象的类的方法来实现一下。

思路：

首先为所有图片设置opacity:0，然后有一个类写了样式opacity:1。当轮播到某张图片时，把这个类给它加上即会显示该图片，同时把之前一张显示的图片的这个类移除了。

代码：

代码如下，如有疏漏或错误之处，敬请斧正。

<!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>轮播图 可点击切换</title>
<style>
* {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

.changeImgs {
position: relative;
}

.container {
position: relative;
margin: 100px auto;
height: 450px;
width: 650px;

}

/*设置每张图片的样式*/
.container li {
position: absolute;
height: 450px;
width: 650px;
opacity: 0;
/*淡出的效果*/
transition: opacity 1.4s;
}

li > img {
height: 100%;
width: 100%;
}

.container .show {
opacity: 1;

}

.dots {
display: flex;
justify-content: space-around;
align-items: center;
height: 16px;
width: 170px;
position: absolute;
left: 50%;
bottom: 6%;
transform: translateX(-50%);
text-align: center;
}

.dot {
overflow: hidden;
height: 10px;
width: 10px;
border-radius: 50%;
}

.dot-son {
position: relative;
height: 10px;
width: 10px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, .4);
border: 3px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
}

.dot:hover {
overflow: visible;
}
</style>

<!--    这个里面写了俩函数，为某对象移除某类和添加某类-->
<script>
//为某个DOM对象添加一个类,
// obj为该对象,
//cn为要添加的类名.
function addClass(obj,cn) {
var re=new RegExp("\\b"+cn+"\\b");
if (!re.test(obj.className))
obj.className+=" "+cn;
}

//为某个DOM对象移除一个已有的类
//obj为该对象
//cn为要移除的类名
function removeClass(obj,cn) {
var re=new RegExp("\\s"+cn+"\\b");
if (re.test(obj.className))
obj.className=obj.className.replace(re,"");
}
</script>

<script>
window.onload = function () {
//获取图片对象
var imgs = document.querySelectorAll(".container li");

var i = 1;
var k = 0;

var timerClean;
var timerRoll;

function autoRoll() {
timerRoll = setInterval(function () {
addClass(imgs[i++], "show");
if (i == imgs.length)
i = 0;
}, 4000);

//方法一，感觉良好
timerClean = setInterval(function () {
removeClass(imgs[k++], "show");
if (k == imgs.length)
k = 0;
}, 4000);
}

autoRoll();

//消除类的方法2感觉不如方法1。但是无可厚非。
// var m = -1;
// for (var m=0;m<imgs.length;m++)
// {
//     removeClass(imgs[m],"show");
// }
var dots = document.querySelectorAll(".dots .dot");

//定义一个函数，展示索引为index的图片
function showimg(index) {
for (var j = 0; j < imgs.length; j++) {
removeClass(imgs[j], "show");
}
addClass(imgs[index], "show");
}

//为每个按钮绑定 鼠标点击事件，点击后关闭加类和消除类定时器，按照新索引重新开启它们。
//同时，调用showimg函数展示对应图片。
for (var z = 0; z < dots.length; z++) {
dots[z].num = z;
dots[z].onclick = function () {
clearInterval(timerRoll);
clearInterval(timerClean);
i = (this.num + 1) % imgs.length;
k = this.num;
showimg(this.num);
autoRoll();
}
}
}
</script>
</head>
<body>
<div class="changeImgs">
<ul class="container">
<li class="img show"><img src="image/1.png" alt=""></li>
<li class="img"><img src="image/2.png" alt=""></li>
<li class="img"><img src="image/3.png" alt=""></li>
<li class="img"><img src="image/4.png" alt=""></li>
<li class="img"><img src="image/5.png" alt=""></li>
</ul>
<ul class="dots">
<li class="dot">
<div class="dot-son"></div>
</li>
<li class="dot">
<div class="dot-son"></div>
</li>
<li class="dot">
<div class="dot-son"></div>
</li>
<li class="dot">
<div class="dot-son"></div>
</li>
<li class="dot">
<div class="dot-son"></div>
</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航