欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年03月28日 09:33:43   作者：李斌  
這篇文章主要介紹了輕量級jQuery插件slideBox實現(xiàn)帶底欄輪播(焦點圖)代碼，代碼簡單易懂，非常實用，特此分享腳本之家平臺供大家學(xué)習(xí)

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

<!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,//滾動持續(xù)時間，單位：秒
easing : 'linear',//swing,linear//滾動特效
delay : 5,//滾動延遲時間，單位：秒
startIndex : 1//初始焦點順序
});
$('#demo3').slideBox({
duration : 0.3,//滾動持續(xù)時間，單位：秒
easing : 'linear',//swing,linear//滾動特效
delay : 5,//滾動延遲時間，單位：秒
hideClickBar : false,//不自動隱藏點選按鍵
clickBarRadius : 10
});
$('#demo4').slideBox({
hideBottomBar : true//隱藏底欄
});
});
</script>
</head>

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

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

相關(guān)文章

  • jquery 應(yīng)用代碼 方便的排序功能

    jquery 應(yīng)用代碼 方便的排序功能

    點擊后可以輸入排序的數(shù)字編號，移開后自動更新數(shù)據(jù)庫。
    2010-02-02
  • jQuery操作屬性和樣式詳解

    jQuery操作屬性和樣式詳解

    下面小編就為大家?guī)硪黄猨Query操作屬性和樣式詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-04-04

    • 最新評論