一款jQuery轻量级全屏自动轮播图,图片是自动全屏自适应的,底部有图片对应的焦点样式,并且可以点击每个焦点来切换图片。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791