首页 > 英文翻译

焦点图

更新时间:2022-12-29 11:34:18 阅读：评论：0

2022年12月29日发(作者：王雅婷)

这篇文章主要介绍了轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码，代码简

单易懂，非常实用，特此分享脚本之家平台供大家学习

直接给大家贴代码了，具体代码如下所示：

<!doctypehtml>

<html>

<head>

<metachart="utf-8">

<title>jQuery图片轮播(焦点图)插件</title>

<linkhref="css/"rel="stylesheet"type="text/css"/>

<scriptsrc="js/"type="text/javascript"></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:fal,//不自动隐藏点选按键

clickBarRadius:10

});

$('#demo4').slideBox({

hideBottomBar:true//隐藏底栏

});

</script>

</head>

<body>

<h3>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点

第1张，点选按键自动隐藏，按键边框半径（IE8-只方不圆）5px（以上各项为默认设置值）

</h3>

<divid="demo1"class="slideBox">

<ulclass="items">

<li><ahref="/"title="这里是测试标题一"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题二"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题三"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题四"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题五"><img

src="img/"></a></li>

</ul>

</div>

<h3>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点

第2张，点选按键自动隐藏</h3>

<divid="demo2"class="slideBox">

<ulclass="items">

<li><ahref="/"title="这里是测试标题一"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题二"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题三"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题四"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题五"><img

src="img/"></a></li>

</ul>

</div>

<h3>三、左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点

第1张，点选按键不隐藏，按键边框半径10px（圆形）</h3>

<divid="demo3"class="slideBox">

<ulclass="items">

<li><ahref="/"title="这里是测试标题一"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题二"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题三"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题四"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题五"><img

src="img/"></a></li>

</ul>

</div>

<divid="demo4"class="slideBox">

<ulclass="items">

<li><ahref="/"title="这里是测试标题一"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题二"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题三"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题四"><img

src="img/"></a></li>

<li><ahref="/"title="这里是测试标题五"><img

src="img/"></a></li>

</ul>

</div>

<scriptsrc="/js/"></script>

</body>

</html>

以上内容是有关轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码，希望对大家

有所帮助！

本文发布于:2022-12-29 11:34:18，感谢您对本站的认可！

本文链接：http://www.wtabcd.cn/fanwen/fan/90/52803.html

上一篇：表现手法

下一篇：电影推荐排行榜

标签：焦点图

留言与评论（共有 0 条评论）