jQuery实战——banner轮播图

最新推荐文章于 2022-03-06 17:35:39 发布

-Whonow�

最新推荐文章于 2022-03-06 17:35:39 发布

阅读量782

点赞数

分类专栏：前端轮播图 jQuery实战文章标签： jquery css html

本文链接：https://blog.csdn.net/whonow33/article/details/106803877

版权

基于jQuery 实现的一个简易banner轮播图

在这里插入图片描述
HTML代码

<body>
	<div class="play" id="play">
		<ol>
			<li class="active">1</li>
			<li >2</li>
			<li >3</li>
		</ol>
		<ul>
			<li><img src="http://pic1.win4000.com/wallpaper/2018-12-21/5c1c601a162f4.jpg"/></li>
			<li><img src="http://pic1.win4000.com/wallpaper/2018-12-24/5c2034a4aefdb.jpg"/></li>
			<li><img src="http://pic1.win4000.com/wallpaper/2019-01-04/5c2ebdd372308.jpg"/></li>
			<li><img src="http://pic1.win4000.com/wallpaper/2018-12-21/5c1c601a162f4.jpg"/></li>
		</ul>
	</div>

</body>

引入外部CSS文件

	<link type="text/css" href="css.css" rel="stylesheet" />

CSS代码块

*{
	padding: 0;
	margin: 0;
}
li{

	list-style: none;
}
img{
	border:none;
}
body{
	background:rgb(255,255,255); 
}

.play{
	overflow: hidden;
	width: 470px;
	height: 250px;
	position: relative;
	margin: 80px auto 0;
}
ol{
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 2;
}
ol li{
	float: left;
	margin-right:20px;
	display: inline;
	cursor: pointer;
	background:rgb(95,159,163); 
	border:1px solid rgb(210,203,44); 
}
.active{
	padding: 3px 8px;
	font-weight: bold;
	color: rgb(255,255,255);
	background:rgb(210,203,44);
	position: relative;
	botton:2px;
}

ul{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
ul li{
	width: 470px;
	height: 250px;
	float: left;
}

ul img{
	float: left;
	width: 470px;
	height: 250px;
}

重点：JS部分代码

	<script >
		$(function(){
   
			var aBtns = $("#play ol li");
			var oUl = $("#play ul");
			var aLis = oUl.find("li");

			// // 给所有按钮增加点击事件
			// aBtns.click(function(){
   
			// 	//jQuery attr() 方法也用于设置/改变属性值。
			// 	//siblings()除this以外的兄弟节点 进行操作
			// 	$(this).attr("class","active").siblings().attr("class"," ");
                
   //              //设置向上滚动动画 .index()获取下标数值

最低0.47元/天解锁文章

-Whonow�

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实战——banner轮播图

基于jQuery 实现的一个简易banner轮播图HTML代码<body> <div class="play" id="play"> <ol> <li class="active">1</li> <li >2</li> <li >3</li> </ol> <ul> <li><img src="http://pic1.
复制链接

扫一扫