unslider插件制作图片轮播

引入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>

 对箭头图片设置成想要的形式。