unslider插件制作图片轮播

最新推荐文章于 2022-06-23 16:36:46 发布

原创最新推荐文章于 2022-06-23 16:36:46 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用jQuery和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>

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