响应式带进度条图片轮播免费下载

响应式图片轮播特点支持响应式、带左右箭头和圆点切换、支持进度显示(自己扩展的加强版)

HTML代码

<div class="banner" id="b04"> 
  <ul> 
    <li class="slider-item"><a target="_blank"  href="#"><img src="img/01.jpg" alt="小米进军泡面界,5块一桶还包邮?雷军回应;92女生:360关闭直播不诚恳,需周鸿祎道歉;传阿里即将控股A站|早报" width="640" height="480" ><span class="slider-title"><em>小米进军泡面界,5块一桶还包邮?雷军回应;92女生:360关闭直播不诚恳,需周鸿祎道歉;传阿里即将控股A站|早报</em></span></a></li> 
    <li class="slider-item"><a target="_blank"  href="#"><img src="img/02.jpg" alt="如果你是创业者,你或许应该琢磨琢磨投资人是怎么想的" width="640" height="480" ><span class="slider-title"><em>如果你是创业者,你或许应该琢磨琢磨投资人是怎么想的</em></span></a></li> 
    <li class="slider-item"><a target="_blank"  href="#"><img src="img/03.jpg" alt="傅盛:生物学思维给我的四个启示" width="640" height="480" ><span class="slider-title"><em>傅盛:生物学思维给我的四个启示</em></span></a></li> 
    <li class="slider-item"><a target="_blank"  href="#"><img src="img/04.jpg" alt="重仓何小鹏" width="640" height="480" ><span class="slider-title"><em>重仓何小鹏</em></span></a></li> 
    <li class="slider-item"><a target="_blank"  href="#"><img src="img/05.jpg" alt="深潜:王石的创业" width="640" height="480" ><span class="slider-title"><em>深潜:王石的创业</em></span></a></li> 
  </ul> 
<div class="progress"></div> 
<a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="img/arrowl.png" alt="prev" width="20" height="35"></a> 
<a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="img/arrowr.png" alt="next" width="20" height="37"></a> 
</div>

引入插件

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/unslider.min.js"></script>

javascript代码

$(document).ready(function(e) { 
    var progress = $(".progress"),li_width = $("#b04 li").length; 
    var unslider04 = $('#b04').unslider({ 
        dots: true, 
        complete:function(index){//自己添加的,官方没有 
            progress.animate({"width":(100/li_width)*(index+1)+"%"}); 
        } 
    }), 
 
    data04 = unslider04.data('unslider'); 
    $('.unslider-arrow04').click(function() { 
        var fn = this.className.split(' ')[1]; 
        data04[fn](); 
    }); 
});

关键点(自己拓展的)

complete:function(index){//自己添加的,官方没有 
    progress.animate({"width":(100/li_width)*(index+1)+"%"}); 
}
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录