焦点轮播图（1）静态布局

最新推荐文章于 2024-04-27 13:06:52 发布

zhengxue_er

最新推荐文章于 2024-04-27 13:06:52 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： html 布局图片焦点轮播图

本文链接：https://blog.csdn.net/qq_38177305/article/details/78167086

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

今天系统的学习了一下轮播图。又来打卡记录啦！
轮播图的要素主要有：图片，焦点小图标，前后播放按键。布局完成后的效果如图：
这里写图片描述
下面就上静态布局的代码：

<body>
		<div id = "container">
			<div id = "list" style = "left:-3000px;">
				<img src="img/5.jpg" alt="" />
				<img src="img/1.jpg" alt="" />
				<img src="img/2.jpg" alt="" />
				<img src="img/3.jpg" alt="" />
				<img src="img/4.jpg" alt="" />
				<img src="img/5.jpg" alt="" />
				<img src="img/1.jpg" alt="" />	
			</div>
			<div id = "buttons">
				<span index="1" class="on"></span>
				<span index="2"></span>
				<span index="3"></span>
				<span index="4"></span>
				<span index="5"></span>
			</div>
			<a href="javascript:;" class="arrow" id="prev">&lt;</a>
			<a href="javascript:;" class="arrow" id="next">&gt;</a>
		</div>
	</body>

下面是设置CSS样式：

<style type="text/css">
			*{ 
				margin: 0; padding: 0; text-decoration: none; 
			 }
			body{
				padding:20px;
			}
			#container{
				width:600px; height:392px; border:3px solid #333; overflow: hidden; position:relative;margin:0 auto; 
			}
			#list{
				width: 4200px; height: 400px; position: absolute; z-index: 1;
			}
			#list img{
				float:left;
			}
			#buttons{
				position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;
			}
			#buttons span{
				cursor: pointer; float: left; border:1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;
			}
			#buttons .on{
				background: orange;
			}
			.arrow{
				cursor: pointer; display: none; line-height: 30px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.5);color:white; 
			}
			.arrow:hover{
				background-color: RGBA(0,0,0,.7);
			}
			#container:hover .arrow{
				display:block;
			}
			#prev{
				left:20px;
			}
			#next{
				right: 20px;
			}
		</style>

1.设置container和图片列表宽度时要注意自己图片的大小。我的图片为600px，故container是一张图片的宽度，列表是整个7张图片的宽度。

2.初始时设置arrow的display属性为none，hover到container时以block显示，hover到arrow改变透明度，有一个交互的效果。

3.通过改变left值显示不同的图片。

4.在5张图片的首尾再加上相邻的图片，可以在视觉上产生无缝轮播的效果。

zhengxue_er

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
焦点轮播图（1）静态布局

今天系统的学习了一下轮播图。又来打卡记录啦！轮播图的要素主要有：图片，焦点小图标，前后播放按键。布局完成后的效果如图：下面就上静态布局的代码：<body> <div id = "container"> <div id = "list" style = "left:-3000px;"> <img src="img/5
复制链接

扫一扫