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

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

 更新時(shí)間：2016年03月28日 09:33:43   作者：李斌  
這篇文章主要介紹了輕量級(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 href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" 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 href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" 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 href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" 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 href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(biāo)題四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.dbjr.com.cn/" title="這里是測(cè)試標(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)輕量級(jí)jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼，希望對(duì)大家有所幫助！

相關(guān)文章

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

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

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

    jQuery操作屬性和樣式詳解

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

    • 最新評(píng)論