Web开发基础：JavaScript轮播图

最新推荐文章于 2023-10-16 18:00:25 发布

恒哥~Bingo

最新推荐文章于 2023-10-16 18:00:25 发布

阅读量600

点赞数 1

分类专栏：前端文章标签： js html css 轮播图

本文链接：https://blog.csdn.net/u013343114/article/details/113803960

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

超详细的Java知识点路线图

图片轮播

在这里插入图片描述

功能点

1、页面效果HTML+CSS
2、图片横向滚动
3、每滚动一张图片，暂停一下
4、下面的圆点跟着图片变化

代码


<!DOCTYPE html>
<html>
<head>
	<title>广告轮播</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0px;
			padding:0px;
		}
		#container{
			width: 780px;
			height:455px;
			margin: 0px auto;
			background: #cccccc;
			position: relative;
		}
		#banner{
			width: 780px;
			height:455px;
			overflow: hidden;
			/*将ul的父容器设置为相对定位*/
			position: relative;
			text-align: center;
		}
		#imgs{
			width:4680px;
			height: 100%;
		}
		#imgs img{
			width: 780px;
			height: 455px;
			display: inline-block;
		}
		#container ul{
			list-style: none;
			/*叠放在banner上,将ul设置为绝对定位*/
			position: absolute;
			left:342px;
			bottom: 10px;
		}
		#container ul li{
			float: left;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #ffffff;
			margin-right: 4px;
		}
		.slide_btn{
			width: 60px;
			height: 45px;
			background: #000000;
			/*透明度 0 ~ 1*/
			opacity: 0.3;
			position: absolute;
			top:200px;
		}
		#pre_btn{
			left:0px;
			border-radius: 0px 4px 4px 0px;
		}
		#next_btn{
			left:720px;
			border-radius: 4px 0px 0px 4px;
		}
		#next{
			width: 100%;
			height: 100%;
			background:url(img/oeD55470539oS.jpg) -110px -49px;
		}
		#pre{
			width: 100%;
			height: 100%;
			background:url(img/oeD55470539oS.jpg) -110px -113px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="banner">
			<div id="imgs">
				 <img src="img/kQH63660936yu.jpg"><img src="img/gqh63659406pp.jpg"><img src="img/OIl61434592QN.jpg"><img src="img/wnM59961793kx.jpg"><img src="img/tfs58753019wI.jpg"><img src="img/kQH63660936yu.jpg">  
			</div>
		</div>
		<ul id="indicator"><li></li><li></li><li></li><li></li><li></li></ul>
		<div id="pre_btn" class="slide_btn">
			<div id="pre"></div>
		</div>
		<div id="next_btn" class="slide_btn">
			<div id="next"></div>
		</div>
	</div>
	<script type="text/javascript">
		var timer;
		//红色圆点的索引
		var index = 0;
		//获得ul指示器中所有的li
		var lis = document.getElementById("indicator").childNodes;
		//当前的圆点对象
		var current;
		//移动广告层
		function moveBanner(){
			var banner = document.getElementById("banner");
			var imgs = document.getElementById("imgs");
			//将banner层向左滚动
			banner.scrollLeft++;
			//每滚动一个图片宽度，就停顿下
			if(banner.scrollLeft % banner.offsetWidth == 0){
				//停止周期任务
				clearInterval(timer);
				//延时2秒重新启动周期任务
				setTimeout("startBanner()",2000);
				//将圆点的索引加一
				index++;
			}
			//如果banner滚动到最左边，设置banner的scrollLeft为0，继续滚动
			if(banner.scrollLeft >= imgs.offsetWidth - banner.offsetWidth){
				banner.scrollLeft = 0;
				//将圆点索引设置为0
				index = 0;
			}
			//将之前的圆点对象设置为白色
			if(current != null){
				current.style.background = "#ffffff";
			}
			//将当前的圆点设置为红色
			lis.item(index).style.background = "#ff0000";
			//将当前的圆点保存在current中，便于下次将这个点设为白色
			current = lis.item(index);
		}
		//启动滚动
		function startBanner(){
			timer = setInterval("moveBanner()",0.1);
		}
		startBanner();
	</script>
</body>
</html>

恒哥~Bingo

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web开发基础：JavaScript轮播图

图片轮播功能点：1、页面效果HTML+CSS2、图片横向滚动3、每滚动一张图片，暂停一下4、下面的圆点跟着图片变化<!DOCTYPE html><html><head> <title>广告轮播</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0px; padding:0px; } #conta
复制链接

扫一扫