Web前端_轮播图的实现

最新推荐文章于 2024-03-07 17:38:13 发布

黑狗向前跑

最新推荐文章于 2024-03-07 17:38:13 发布

阅读量2.3k

点赞数 3

分类专栏： Web前端文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_42137574/article/details/120152839

版权

Web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>轮播图1</title>
	<style type="text/css">
		ul{
			list-style: none;
		}
		.imgs{
			width:590px;
			height:470px;
			overflow: hidden;
		}
		.dots{
			width:164px;
			position:absolute;
            left:250px;
            top:450px;
            z-index: 999;
		}
        .dot{
            width:10px;
            height:10px;
            border:2px solid #fff;
            border-radius:10px;
            display: inline-block;
		}
		.choose{
			background-color: #5bc0de;
		}
	</style>
</head>
<body>
	<div class="ad">
		<ul id="imgs" class="imgs">
			<li  class="img_li"><img src="img/1.jpg"></li>
			<li  class="img_li"><img src="img/2.jpg"></li>
			<li  class="img_li"><img src="img/3.jpg"></li>
			<li  class="img_li"><img src="img/4.jpg"></li>
			<li  class="img_li"><img src="img/5.jpg"></li>
			<li  class="img_li"><img src="img/6.jpg"></li>
		</ul>
		<ul class="dots">
			<li data='0' class="dot choose"></li>
			<li data='1' class="dot"></li>
			<li data='2' class="dot"></li>
			<li data='3' class="dot"></li>
			<li data='4' class="dot"></li>
			<li data='5' class="dot"></li>
		</ul>
	</div>

<script type="text/javascript">
	//是否循环
    var isxunhuan = true;
    //用来 计数哪一张图显示 和 哪个点选中
	var index = 0;
	//获取所有点轮播图片
	var allimg = document.getElementsByClassName('img_li');
	//获取所有的点
	var dots = document.getElementsByClassName('dot');

	setInterval(function(){
		// 判断是否可以循环
		if(!isxunhuan){
			return;
		}
		index++;
		//超过 最大图片数就归0
		if(index >= allimg.length){
			index = 0;
		}
		//隐藏所有点图片
		for (var i = 0; i < allimg.length; i++) {
			allimg[i].style.display = 'none';
		}
		//显示对应点图片
		allimg[index].style.display = 'block';
		//将所有点 重置为 为未选中状态
		for (var i = 0; i < dots.length; i++) {
			dots[i].className = 'dot';
		}
		//选中对应点
		dots[index].className = 'dot choose';
	},3000);

	//循环给 所有点绑定 鼠标悬浮事件
	for (var i = 0; i < dots.length; i++) {
		dots[i].onmouseover = function () {
			//如果鼠标 悬浮在点上 就停止 自动轮播
			isxunhuan = false;
			//将所有图片隐藏 将所有点设置为未选中状态
			for (var j = 0; j < dots.length; j++) {
				allimg[j].style.display = 'none';
				dots[j].className = 'dot';
			}
			//设置对应点为选中状态
			this.className = 'dot choose';
			//将对应图片设置为显示
			allimg[this.getAttribute('data')].style.display = 'block';
			//将选中的点 和 显示的图片 绑定
			index = this.getAttribute('data');
		}
		//鼠标离开点 就自动轮播
		dots[i].onmouseout = function(){
			isxunhuan = true;
		}
	}
</script>
</body>
</html>

在这里插入图片描述

黑狗向前跑

关注

3
点赞
踩
41

收藏

觉得还不错? 一键收藏
1
评论
Web前端_轮播图的实现

<!DOCTYPE html><html><meta charset="utf-8"><head> <title>轮播图1</title> <style type="text/css"> ul{ list-style: none; } .imgs{ width:590px; height:470px; overflow: hidden; } .dots{ width
复制链接

扫一扫