廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!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 href="http://www.49028c.com/" title="這里是測試標題一"><img src="img/1.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題二"><img src="img/2.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題三"><img src="img/3.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題四"><img src="img/4.jpg"></a></li><li><a href="http://www.49028c.com/" 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 href="http://www.49028c.com/" title="這里是測試標題一"><img src="img/1.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題二"><img src="img/2.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題三"><img src="img/3.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題四"><img src="img/4.jpg"></a></li><li><a href="http://www.49028c.com/" 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 href="http://www.49028c.com/" title="這里是測試標題一"><img src="img/1.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題二"><img src="img/2.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題三"><img src="img/3.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題四"><img src="img/4.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題五"><img src="img/5.jpg"></a></li></ul></div><h3>四、隱藏底欄</h3><div id="demo4" class="slideBox"><ul class="items"><li><a href="http://www.49028c.com/" title="這里是測試標題一"><img src="img/1.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題二"><img src="img/2.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題三"><img src="img/3.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題四"><img src="img/4.jpg"></a></li><li><a href="http://www.49028c.com/" title="這里是測試標題五"><img src="img/5.jpg"></a></li></ul></div><!--可刪除--><script src="http://www.49028c.com/js/jq.js"></script><!--ecd 可刪除--></body></html>以上內容是有關輕量級jQuery插件slideBox實現帶底欄輪播(焦點圖)代碼，希望對大家有所幫助！
新聞熱點
疑難解答
