這篇文章主要介紹了輕量級(jí)jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼，代碼簡(jiǎn)單易懂，非常實(shí)用，特此分享腳本之家平臺(tái)供大家學(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,//滾動(dòng)持續(xù)時(shí)間，單位：秒
easing : 'linear',//swing,linear//滾動(dòng)特效
delay : 5,//滾動(dòng)延遲時(shí)間，單位：秒
startIndex : 1//初始焦點(diǎn)順序
});
$('#demo3').slideBox({
duration : 0.3,//滾動(dòng)持續(xù)時(shí)間，單位：秒
easing : 'linear',//swing,linear//滾動(dòng)特效
delay : 5,//滾動(dòng)延遲時(shí)間，單位：秒
hideClickBar : false,//不自動(dòng)隱藏點(diǎn)選按鍵
clickBarRadius : 10
});
$('#demo4').slideBox({
hideBottomBar : true//隱藏底欄
});
});
</script>
</head>
<body>
<h3>一、左右輪播，滾動(dòng)持續(xù)0.6秒，滾動(dòng)延遲3秒，滾動(dòng)效果swing，初始焦點(diǎn)第1張，點(diǎn)選按鍵自動(dòng)隱藏，按鍵邊框半徑（IE8-只方不圓）5px（以上各項(xiàng)為默認(rèn)設(shè)置值）</h3>
<div id="demo1" class="slideBox">
<ul class="items">
<li><a title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>二、上下輪播，滾動(dòng)持續(xù)0.3秒，滾動(dòng)延遲5秒，滾動(dòng)效果linear，初始焦點(diǎn)第2張，點(diǎn)選按鍵自動(dòng)隱藏</h3>
<div id="demo2" class="slideBox">
<ul class="items">
<li><a title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>三、左右輪播，滾動(dòng)持續(xù)0.3秒，滾動(dòng)延遲5秒，滾動(dòng)效果linear，初始焦點(diǎn)第1張，點(diǎn)選按鍵不隱藏，按鍵邊框半徑10px（圓形）</h3>
<div id="demo3" class="slideBox">
<ul class="items">
<li><a title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<h3>四、隱藏底欄</h3>
<div id="demo4" class="slideBox">
<ul class="items">
<li><a title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a title="這里是測(cè)試標(biāo)題五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<!--可刪除-->
<script src="http://www.jb51.net/js/jq.js"></script>
<!--ecd 可刪除-->
</body>
</html>
以上內(nèi)容是有關(guān)輕量級(jí)jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼，希望對(duì)大家有所幫助！
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：