如何使用?
1. 引入jQuery和jQuery.autoSlider文件
<!-- 注意,jQuery要在jQuery.autoSlider之前引入 -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jQuery.autoSlider.min.js"></script>
2. 引入HTML代码
<div class="banner">
<ul>
<li>我是一</li>
<li>我是二</li>
<li>我是三</li>
</ul>
</div>
3. 加入基本的css
.banner{
position: relative;
margin: 0 auto;
}
.banner ul{
padding: 0;
margin: 0;
}
.banner li{
list-style: none;
}
4. 调用插件
$(function(){
$('.banner').autoSlider();
});
其他
1. 自定义参数设置
$('.banner').autoSlider({
speed: 800, // 图片显示速度
delay: 3000, // 图片停留时间
dots: true, // 导航(导航的样式需要重新定义)
stay: true, // 鼠标移入停留
fluid: true // 自适应
});
PS
- 如果遇到什么问题,一定要给作者一个issue!!!
- 如果觉得用起来不错的,给作者一个star可好~