设置轮播图笔记

最新推荐文章于 2024-06-23 00:14:40 发布

小白家的小黑

最新推荐文章于 2024-06-23 00:14:40 发布

阅读量235

点赞数

分类专栏： web 文章标签： css html js

本文链接：https://blog.csdn.net/m0_53521757/article/details/117694661

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客记录了创建轮播图的过程，包括准备相同尺寸的照片，创建名为banner的CSS文件，设置图片div样式，并在HTML中引入CSS文件及设定轮播图div属性。

摘要由CSDN通过智能技术生成

1.准备尺寸大小一致的照片，并导入img中
在这里插入图片描述
2.新建一个css文件，这里命名为banner，在banner中插入以下代码

.banner {
	position: relative;
	overflow: auto;
	text-align: center;
}

.banner li {
	list-style: none;
}

.banner ul li {
	float: left;
}

.banner {
	width: 100%;
	height: 90px;
}

.banner .dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
}

.banner .dots li {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 4px;
	text-indent: -999em;
	border: 2px solid #fff;
	border-radius: 6px;
	cursor: pointer;
	opacity: .4;
	-webkit-transition: background .5s, opacity .5s;
	-moz-transition: background .5s, opacity .5s;
	transition: background .5s, opacity .5s;
}

.banner .dots li.active {
	background: #fff;
	opacity: 1;
}

3.在主代码中引入banner.css文件
在这里插入图片描述

4.给轮播图的div设置一个class，命名为banner。
在这里插入图片描述
5.给图片的div加样式（该div的class为banner）

6.在轮播图的div中加两个<script>属性

代码：

  <script>	
      $(document).ready(function(e) {
				$('#banner').
				unslider({
							dots: true
						});
	    });
  </script>
	
  <script>
    	$(document).ready(function(e) {
		    $('#b02').unslider();
		});
  </script>