简易轮播图（最全代码解析）JavaScript（ES5）

VIP文章飒尔

已于 2022-03-04 15:46:07 修改

阅读量1k

点赞数 1

分类专栏： javascript 文章标签： javascript

于 2021-09-08 18:09:00 首次发布

本文链接：https://blog.csdn.net/csertuh/article/details/120185804

版权

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ES5轮播图</title>
		<style>
			* {padding: 0;margin: 0;}
			#wrapper {
				position: relative;
				margin: 50px auto;
				padding: 0;
				width: 1000px;
				height: 300px;
			}
			#wrapper .content {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			#wrapper>.content>.imgs {
				position: absolute;
				margin: 0;
				padding: 0;
				left: 0;
				top: 0;
				width: 6000px;
				/*多留出一张图片的宽度！*/
				list-style: none;
			}
			#wrapper>.content>.imgs li {
				float: left;
				margin: 0;
				padding: 0;
				width: 1000px;
				height: 300px;
			}
			#wrapper>.content>.imgs>li img {
				width: 100%;
				height: 100%;
			}
			#wrapper>.content>.dots {
				width: 163px;
				position: absolute;
				right: 0;
				left: 0;
				margin: auto;
				bottom: 10px;
				list-style: none;
			}
			#wrapper>.content>.dots li {
				float: left;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border-radius: 50%;
				margin-left: 10px;
				cursor: pointer;
			}
			li.active {
				background-color: white;
			}
			li.quiet {
				background-color: #5a5a58;
			}
			.btns {
				display: none;
			}
			.btns span {
				position: absolute;
				width: 25px;
				height

最低0.47元/天解锁文章

飒尔

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
简易轮播图（最全代码解析）JavaScript（ES5）

全部代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * {padding: 0;margin: 0;} #wrapper { position: relative; margin: 50px auto; padding: 0; width: ..
复制链接

扫一扫