轮播图 - JavaScript

最新推荐文章于 2023-10-25 09:21:28 发布

LSYHhhhh

最新推荐文章于 2023-10-25 09:21:28 发布

阅读量172

点赞数 1

分类专栏：项目学习

本文链接：https://blog.csdn.net/qq_33961117/article/details/83379757

版权

项目学习专栏收录该内容

47 篇文章 1 订阅

订阅专栏

.html 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/scroll.css">
</head>
<body>
    <div class="scroll">
        <!-- 图片区域 -->
        <div class="scroll-img">
            <img class="active" src="img/001.jpg" alt="">
            <img src="img/002.jpg" alt="">
            <img src="img/003.jpg" alt="">
            <img src="img/004.jpg" alt="">
        </div>
        
        <!-- 右下角切换按钮  -->
        <ul class="scroll-tag">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <!-- 左右切换图 -->
        <div class="scroll-toggle">
            <i class="toggle-left"><</i>
            <i class="toggle-right">></i>
        </div>

    </div>
</body>
<script type="text/javascript" src="js/scroll.js"></script>
</html>

.css 样式文件

html, body, ul {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}

.scroll, .scroll-img, img {
	width: 613px;
	height: 230px;
}
.scroll {
	margin: 50px auto;
	position: relative;
	/*用户不可拖拽选中*/
	user-select: none;
}

.scroll-img{
	position: absolute;
}
/*设置轮播图片，同位置按照指定状态显示*/
img{
	position: absolute;
	/*不可见*/
	opacity: 0;
}

/*活跃状态下的img，可见*/
img.active{
	opacity: 1;
}


/*右下选图按钮*/
ul{
	position: absolute;
	bottom: 10px;
	right: 20px;
}
li{
	/*画圈用于点击*/
	width: 8px;
	height: 8px;
	border: 2px solid #888;
	border-radius: 50%;

	float: left;
	margin-left: 10px;
	background-color: transparent;

	/*鼠标悬浮样式*/
	cursor: pointer;
}
/*活跃状态下的li，变色*/
li.active {
	transition: .2s;
	background-color: #999;
}


/*左右切换按钮*/
.toggle-left, .toggle-right {
	width: 40px;
	height: 80px;
	background-color: rgba(255,255, 255, 0.7);
	line-height: 80px;
	text-align: center;
	font-size: 30px;
	position: absolute;
	top: 75px;
	border-radius: 5px;

	/*默认状态不可见*/
	opacity: 0;
}
.toggle-left {
	left: 2px;
}
.toggle-right {
	right: 2px;
}
/*鼠标悬浮，可见，鼠标状态改变*/
.scroll:hover .toggle-left, .scroll:hover .toggle-right {
	transition: .1s;
	opacity: 1;
	cursor: pointer;
}

.js 文件

// 获取页面内组件信息
let imgs = document.querySelectorAll('img');
let lis = document.querySelectorAll('li');
let toggle_left = document.querySelector('.toggle-left');
let toggle_right = document.querySelector('.toggle-right');
let scroll = document.querySelector('.scroll');

// 活跃的li
let li_active = null;
// 活跃的img
let img_active = null;
// 活跃的索引,给imgs和lis使用，二者活跃索引对应
let c_index = 0;
// 定时器
let timer = 0;


// 自动轮播，定时器放在函数内，方便后续停止和继续播放
function autoPlay() {
	timer = setInterval(function () {
		// 清除当前活跃状态
		imgs[c_index].className = "";
		lis[c_index].className = "";

		// 循环的转折，遇3接1
		c_index = c_index == 3 ? -1 : c_index;

		// 轮播索引一次加一
		c_index++;

		// 设置新的活跃状态
		imgs[c_index].className = "active";
		lis[c_index].className = "active";

		// 更新活跃的li|img，服务于点击切换
		li_active = lis[c_index];
		img_active = imgs[c_index];
	},3000)
}
autoPlay();

// 监控鼠标时间，改变自动轮播状态
scroll.onmouseover = function () {
	// 清除自动轮播
	clearInterval(timer);
}
scroll.onmouseout = function () {
	// 重新开启自动轮播
	autoPlay();
}

// 右下，点击切换动画
for (let i = 0; i < lis.length; i++) {
	// 记录当前活跃li|img
	if (lis[i].className == "active") {
		li_active = lis[i];
		img_active = imgs[i];
	}

	// 点击时间
	lis[i].onclick = function () {
		// 切换活跃的li
		li_active.className = "";
		this.className = "active";
		li_active = this;

		// 切换活跃的img
		img_active.className = "";
		imgs[i].className = "active";
		img_active = imgs[i];

		// 更新活跃的索引，服务于自动轮播
		c_index = i;
	}
}

// 左右按钮
toggle_left.onclick = function () {
	// 清除当前活跃状态
	li_active.className = "";
	img_active.className = "";

	// 循环的转折，遇0接3
	c_index = c_index == 0 ? 4 : c_index;
	// 轮播索引一次加一
	c_index--;

	// 设置新的活跃状态
	imgs[c_index].className = "active";
	lis[c_index].className = "active";

	// 更新活跃的li|img，服务于点击切换
	li_active = lis[c_index];
	img_active = imgs[c_index];
}
toggle_right.onclick = function () {
	// 清除当前活跃状态
	imgs[c_index].className = "";
	lis[c_index].className = "";

	// 循环的转折，遇3接0
	c_index = c_index == 3 ? -1 : c_index;
	// 轮播索引一次加一
	c_index++;

	// 设置新的活跃状态
	imgs[c_index].className = "active";
	lis[c_index].className = "active";

	// 更新活跃的li|img，服务于点击切换
	li_active = lis[c_index];
	img_active = imgs[c_index];
}

LSYHhhhh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
轮播图 - JavaScript

.html 结构&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图&lt;/title&gt; &lt;link rel="stylesheet" href=&
复制链接

扫一扫