suchen

Heim >Web-Frontend >js-Tutorial >Das leichte jQuery-Plug-in slideBox implementiert Karussellcode (Focus Map) mit der unteren bar_jquery

Das leichte jQuery-Plug-in slideBox implementiert Karussellcode (Focus Map) mit der unteren bar_jquery

WBOY
WBOYOriginal
2016-05-16 15:07:521470Durchsuche

Ohne weitere Umschweife werde ich einfach den Code für Sie veröffentlichen. Der spezifische Code lautet wie folgt: 

<!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.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" 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.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" 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.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" 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.jb51.net/" title="这里是测试标题一"><img src="img/1.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题二"><img src="img/2.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题三"><img src="img/3.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题四"><img src="img/4.jpg"></a></li>
<li><a href="http://www.jb51.net/" title="这里是测试标题五"><img src="img/5.jpg"></a></li>
</ul>
</div>
<!--可删除-->
<script src="http://www.jb51.net/js/jq.js"></script>
<!--ecd 可删除-->
</body>
</html>

Bei dem obigen Inhalt geht es um den leichtgewichtigen jQuery-Plug-in-SlideBox-Implementierungscode mit Karussell in der unteren Leiste (Fokusbild).

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analysieren Sie Probleme bei der Registrierung von Ereignissen, die durch js-Closure_Javascript-Kenntnisse verursacht werdenNächster Artikel：Analysieren Sie Probleme bei der Registrierung von Ereignissen, die durch js-Closure_Javascript-Kenntnisse verursacht werden

In Verbindung stehende Artikel

Mehr sehen