javascript实现图片自动和可控的轮播切换特效

前端技术 2023/09/08 JavaScript

演示图：

需要引入的文件

复制代码 代码如下:
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://hovertree.com/texiao/js/1/css/style.css\"> <script type=\"text/javascript\" src=\"http://hovertree.com/texiao/js/1/js/koala.min.1.5.js\"></script>

js代码：

<script type=\"text/javascript\">
Qfast.add(\'widgets\', { path: \"http://hovertree.com/texiao/js/1/js/terminator2.2.min.js\", type: \"js\", requires: [\'fx\'] });
Qfast(false, \'widgets\', function () {
K.tabs({
id: \'decoroll2\', //焦点图包裹id
conId: \"decoimg_a2\", //大图域包裹id
tabId: \"deconum2\", //小圆点数字提示id
tabTn: \"a\",
conCn: \'.decoimg_b2\', //大图域配置class
auto: 1, //自动播放 1或0
effect: \'fade\', //效果配置
eType: \'mouseover\', // 鼠标事件
pageBt: true, //是否有按钮切换页码
bns: [\'.prev\', \'.next\'], //前后按钮配置class
interval: 3000// 停顿时间
})
})
</script>

html代码

<div id=\"decoroll2\" class=\"imgfocus\">
<div id=\"decoimg_a2\" class=\"imgbox\">
<div class=\"decoimg_b2\">
<a href=\"http://www.phpstudy.net\">
<img src=\"/texiao/js/1/img/1.jpg\">
</a>
</div>
<div class=\"decoimg_b2\">
<a href=\"http://www.phpstudy.net\">
<img src=\"/texiao/js/1/img/2.jpg\">
</a>
</div>
<div class=\"decoimg_b2\">
<a href=\"http://www.phpstudy.net\">
<img src=\"/texiao/js/1/img/3.jpg\">
</a>
</div>
<div class=\"decoimg_b2\">
<a href=\"http://www.phpstudy.net\">
<img src=\"/texiao/js/1/img/4.jpg\">
</a>
</div>
</div>
<ul id=\"deconum2\" class=\"num_a2\">
<li><a href=\"javascript:void(0)\" hidefocus=\"true\" target=\"_self\">杨幂</a></li>
<li><a href=\"javascript:void(0)\" hidefocus=\"true\" target=\"_self\">范冰冰</a></li>
<li><a href=\"javascript:void(0)\" hidefocus=\"true\" target=\"_self\">高圆圆</a></li>
<li><a href=\"javascript:void(0)\" hidefocus=\"true\" target=\"_self\">刘诗诗</a></li>
</ul>
</div>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/23184

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案