引入jquery和unslider。
<script src="../jquery-latest.min.js"></script>
<script src="../unslider.js"></script>
<div class="banner">
<ul>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1QonMMVXXXXapXFXXSutbFXXX.jpg"/></li>
<li><img src="https://gw.alicdn.com/tps/TB1SKk8NFXXXXXjXXXXXXXXXXXX-520-280.jpg"/></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB14ElRNVXXXXbraXXXSutbFXXX.jpg"/></li>
</ul>
</div>
会自动生成小白点
<ol class="dots">
<li class="dot">action 1</li>
<li class="dot">2</li>
<li class="dot">3</li>
可以对小白点设置样式
简单设置样式
.banner {
position: relative; overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
调用unslider
$('.banner').unslider({ speed: 500, // 滚动速度 delay: 3000, // 动画延迟 complete: function() {}, // 动画完成的回调函数 keys: true, // 启动键盘导航 dots: true, // 显示小白点 fluid: false, // 支持响应式设计 arrows:true //显示左右键头 });
可以添加图片式的左右键头,在无序列表后面添加img标签
<a href="javascript:void(0);" class="Timg"><img class="arrow" id="al" src="../img/arrowl.png"/></a>
<a href="javascript:void(0);" class="Timg"><img class="arrow" id="ar" src="../img/arrowr.png"/></a>
对箭头图片设置成想要的形式。