正文
轮播插件unslider.min.js使用demo
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
有两种应用方式：
1、轮播图片作为<img>标签使用
HTML代码：
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js"></script>
</head> <body>
<!-- example_begin -->
<h2>示例</h2> <div class="banner" id="b04">
<!-- 作为img标签使用 -->
<ul>
<li><img src="data:images/01.jpg" alt="" width="640" height="480"></li>
<li><img src="data:images/02.jpg" alt="" width="640" height="480"></li>
<li><img src="data:images/03.jpg" alt="" width="640" height="480"></li>
<li><img src="data:images/04.jpg" alt="" width="640" height="480"></li>
<li><img src="data:images/05.jpg" alt="" width="640" height="480"></li>
</ul>
<a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="data:images/arrowl.png" alt="prev" width="20" height="35"></a>
<a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="data:images/arrowr.png" alt="next" width="20" height="37"></a>
</div>
<!-- example_end -->
</body>
</html>
CSS代码：
html,body {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
ul,ol {
padding:;
}
.banner {
position: relative;
overflow: auto;
text-align: center;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
#b04 {
width: 640px;
}
#b04 .dots {
position: absolute;
left:;
right:;
bottom: 20px;
}
#b04 .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;
}
#b04 .dots li.active {
background: #fff;
opacity:;
}
#b04 .arrow {
position: absolute;
top: 200px;
}
#b04 #al {
left: 15px;
}
#b04 #ar {
right: 15px;
}
JS代码：
$(document).ready(function (e) {
var unslider04 = $('#b04').unslider({
dots: true
}),
data04 = unslider04.data('unslider');
$('.unslider-arrow04').click(function () {
var fn = this.className.split(' ')[1];
data04[fn]();
});
});
效果图：
2、轮播图片作为<li>标签背景图片使用
HMTL代码：
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js"></script>
</head> <body>
<!-- example_begin -->
<h2>示例</h2> <div class="banner" id="b04">
<!-- 作为背景图片使用 -->
<ul>
<li id="index_pic1" class="index_pic1"></li>
<li id="index_pic2" class="index_pic2"></li>
<li id="index_pic3" class="index_pic3"></li>
<li id="index_pic4" class="index_pic4"></li>
<li id="index_pic5" class="index_pic5"></li>
</ul>
<a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="data:images/arrowl.png" alt="prev" width="20" height="35"></a>
<a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="data:images/arrowr.png" alt="next" width="20" height="37"></a>
</div>
<!-- example_end -->
</body>
</html>
CSS代码：在上面CSS的基础上添加以下代码
.index_pic1{
width: 640px;
height: 480px;
margin: 0 auto;
overflow: hidden;
background: url(images/01.jpg) no-repeat;
}
.index_pic2{
width: 640px;
height: 480px;
margin: 0 auto;
overflow: hidden;
background: url(images/02.jpg) no-repeat;
}
.index_pic3{
width: 640px;
height: 480px;
margin: 0 auto;
overflow: hidden;
background: url(images/03.jpg) no-repeat;
}
.index_pic4{
width: 640px;
height: 480px;
margin: 0 auto;
overflow: hidden;
background: url(images/04.jpg) no-repeat;
}
.index_pic5{
width: 640px;
height: 480px;
margin: 0 auto;
overflow: hidden;
background: url(images/05.jpg) no-repeat;
}
JS代码：与上面的JS代码一致
效果图：
总结：
轮播图片作为img标签时，在显示区域大小固定的情况下适用；在轮播图片需要跟随可视窗口大小自适应的情况下，作为li标签背景更妥当
