原生javascript实现图片自动轮播和点击轮播代码

最新推荐文章于 2024-02-08 23:58:01 发布

VIP文章仰望星空的包子

最新推荐文章于 2024-02-08 23:58:01 发布

阅读量2.7w

点赞数 9

分类专栏： JavaScript学习文章标签： JavaScript 图片轮播

本文链接：https://blog.csdn.net/sinat_21206105/article/details/52288242

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*重置样式*/
		*{margin: 0;padding: 0; list-style: none;}
		/*wrap的轮播图和切换按钮样式*/
		.wrap{height: 170px;width: 500px;margin: 100px auto; overflow: hidden;position: relative;}
		.wrap ul{position: absolute;}
		.wrap ul li{height: 170px;}
		.wrap ol{position: absolute;right: 10px;bottom: 10px;}
		.wrap ol li{height: 20px;width: 20px;  background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;}
		.wrap ol li.active{background-color: #330099; color: #fff; border: 2px solid green;}
	</style>
</head>
<body>
<!-- wrap包裹录播的图片以及可点击跳转的按钮 -->
	<div class="wrap" id="wrap">
		<ul id="pic">
			 <li><img src="http://img.mukewang.com/54111cd9

最低0.47元/天解锁文章

仰望星空的包子

关注

9
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
原生javascript实现图片自动轮播和点击轮播代码

Document /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{height: 170px;width: 500px;margin: 100px auto; overflow: hidden;position: relative;} .wrap ul{positio
复制链接

扫一扫