Javascript实例之“轮播图”效果

最新推荐文章于 2021-06-03 16:20:56 发布

雨飞叶

最新推荐文章于 2021-06-03 16:20:56 发布

阅读量309

点赞数 1

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

本文链接：https://blog.csdn.net/heartmvcom/article/details/106498941

版权

初学js语言的朋友都知道，“轮播图”效果是我们必学的一大难点。既要用定时器实现自动播放功能，又要实现用户点击向左或向右的手动切换功能，还要实现指示图标的点击切换图片功能。要应用到的知识点很丰富。

实现轮播图的方法有多种。现在，本作把自己的代码放出来给有需要的朋友参考一下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>heartmv.com</title>
		<style>
			* {
   
				margin: 0;
				padding: 0
			}

			html {
   
				font-size: 15px;
			}

			.box {
   
				width: 50rem;
				height: 32rem;
				border: 3px dashed red;
				margin: 15px 0;
				position: relative;
				left: 50%;
				top: 5%;
				transform: translate(-50%, 0);
				overflow: hidden;
			}

			.box>ul {
   
				width: 500%;
				height: 32rem;
				position: absolute;
			}

			.box>ul>li {
   
				width: 50rem;
				height: 32rem;
				list-style: none;
				float: left;
			}

			.box li img {
   
				width: 50rem;
				height: 32rem;
			}

			.box>ol {
   
				position: absolute;
				left: 50%;
				bottom: 15px;
				transform: translate(-50%, 0);
			}

			.box>ol>li {
   
				width: 1.5rem;
				height: 1.5rem;
				list-style: none;
				margin-left: 15px;
				float: left;
				border-radius: 1.5rem;
				background: rgba(191, 0, 3, 0.5);
				cursor: pointer;
			}

			.box>ol>li.now {
   
				width: <

最低0.47元/天解锁文章

雨飞叶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript实例之“轮播图”效果

初学js语言的朋友都知道，“轮播图”效果是我们必学的一大难点。既要用定时器实现自动播放功能，又要实现用户点击向左或向右的手动切换功能，还要实现指示图标的点击切换图片功能。要应用到的知识点很丰富。实现轮播图的方法有多种。现在，本作把自己的代码放出来给有需要的朋友参考一下：<!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫