jquery帶進度條滾動圖片輪播代碼



147 584 195



特效描述:jquery 帶進度條滾動 圖片輪播代碼,jquery圖片輪播插件制作左右箭頭按鈕控制圖片滾動輪播,標題和進度條顯示效果。

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/main.css" />

2. 引入JS

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

3. HTML代碼

<br /><br /><br />
<div class="banner" id="b04">
	<ul>
		<li class="slider-item"><a 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 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 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 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 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>
$(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]();
    });
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 其他 帶標題的焦點圖 帶簡介的焦點圖 圖片滾動 圖片滾動條 自動滾動圖片輪播 按鈕控制 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子