快捷導(dǎo)航

輕量級jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼

更新時(shí)間：2016年03月28日 09:33:43 作者：李斌

這篇文章主要介紹了輕量級jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼，代碼簡單易懂，非常實(shí)用，特此分享腳本之家平臺供大家學(xué)習(xí)

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery圖片輪播(焦點(diǎn)圖)插件</title>
<link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.slideBox.js" type="text/javascript"></script>
<script>
jQuery(function($){
$('#demo1').slideBox();
$('#demo2').slideBox({
direction : 'top',//left,top#方向
duration : 0.3,//滾動持續(xù)時(shí)間，單位：秒
easing : 'linear',//swing,linear//滾動特效
delay : 5,//滾動延遲時(shí)間，單位：秒
startIndex : 1//初始焦點(diǎn)順序
});
$('#demo3').slideBox({
duration : 0.3,//滾動持續(xù)時(shí)間，單位：秒
easing : 'linear',//swing,linear//滾動特效
delay : 5,//滾動延遲時(shí)間，單位：秒
hideClickBar : false,//不自動隱藏點(diǎn)選按鍵
clickBarRadius : 10
});
$('#demo4').slideBox({
hideBottomBar : true//隱藏底欄
});
});
</script>
</head>

<body>
<h3>一、左右輪播，滾動持續(xù)0.6秒，滾動延遲3秒，滾動效果swing，初始焦點(diǎn)第1張，點(diǎn)選按鍵自動隱藏，按鍵邊框半徑（IE8-只方不圓）5px（以上各項(xiàng)為默認(rèn)設(shè)置值）</h3>
<div id="demo1" class="slideBox">
<ul class="items">
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>二、上下輪播，滾動持續(xù)0.3秒，滾動延遲5秒，滾動效果linear，初始焦點(diǎn)第2張，點(diǎn)選按鍵自動隱藏</h3>
<div id="demo2" class="slideBox">
<ul class="items">
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>三、左右輪播，滾動持續(xù)0.3秒，滾動延遲5秒，滾動效果linear，初始焦點(diǎn)第1張，點(diǎn)選按鍵不隱藏，按鍵邊框半徑10px（圓形）</h3>
<div id="demo3" class="slideBox">
<ul class="items">
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>四、隱藏底欄</h3>
<div id="demo4" class="slideBox">
<ul class="items">
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://m.fzitv.net/" title="這里是測試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<!--可刪除-->
<script src="http://m.fzitv.net/js/jq.js"></script>
<!--ecd 可刪除-->
</body>
</html>

以上內(nèi)容是有關(guān)輕量級jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼，希望對大家有所幫助！

您可能感興趣的文章: