jQuery轻量级全屏自动轮播图

来源:https://www.sucaihuo.com/js/2918.html 2017-09-04 23:58浏览(2705) 收藏

一款jQuery轻量级全屏自动轮播图,图片是自动全屏自适应的,底部有图片对应的焦点样式,并且可以点击每个焦点来切换图片。
jQuery轻量级全屏自动轮播图
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需设置好页面元素的样式,接着引入jQuery库和必要的JS文件,代码如下:

<style type="text/css">
	/*重置浏览器默认样式*/
	html,body,ul,li,div,table,span,img {
		margin: 0px;
		padding: 0px;
	}
	
	html,
	body {
		margin: 0px;
		padding: 0px;
		height: 100%;
	}
	
	.slide_div {
		width: 100%;
		height: 100%;
	}
	
	.slide_img_div {
		position: relative;
	}
	
	.slide_img_ul {width:100%;height: 100%;overflow: hidden;}
	
	.slide_img_ul li img {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	
	.slide_option {
		position: absolute;
		z-index: 999;
		bottom: 0px;
		width: 100%;
		background: black;
		opacity: 0.5;
		text-align: center;
		display: block;
			list-style: none;
	}
	
	.check_li {
		background: red !important;
		opacity: 1 !important;
	}
	
	.slide_option li {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #f0f0f0;
		margin: 5px;
		display: inline-block;
		cursor: pointer;
	}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

页面的body部分,两个ul无序列表分别对应图片列表和焦点列表,代码如下:

<div id="" class="slide_div">
	<div id="slide_img_div">
		<div>
			<ul class="slide_img_ul">
				<li><img src="img/1.png" /></li>
				<li><img src="img/2.png" /></li>
				<li><img src="img/3.png" /></li>
				<li><img src="img/4.png" /></li>
			</ul>
			<ul class="slide_option">
				<li class="check_li"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2