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