JS特效实现图片自动播放并可控的效果


Posted in Javascript onJuly 31, 2015

不多说了,实现方法请看下面代码。

代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" />
<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>
<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>
</head>
<body>
<div><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">原文</a>
<a href="http://hovertree.com/texiao/">特效库</a>
</div>
<div id="decoroll2" class="imgfocus">
<div id="decoimg_a2" class="imgbox">
<div class="decoimg_b2">
<a href="http://hovertree.com/hvtart/bjae/f03e85410878db53.htm">
<img src="http://hovertree.com/texiao/js/1/img/1.jpg">
</a>
</div>
<div class="decoimg_b2">
<a href="http://keleyi.com/">
<img src="http://hovertree.com/texiao/js/1/img/2.jpg">
</a>
</div>
<div class="decoimg_b2">
<a href="http://hovertree.com/shortanswer/">
<img src="http://hovertree.com/texiao/js/1/img/3.jpg">
</a>
</div>
<div class="decoimg_b2">
<a href="http://hovertree.com/guestbook/">
<img src="http://hovertree.com/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>
<br /> 
</body>
</html>

以上代码就是用JS实现图片自动播放并可控的效果,希望对大家有所帮助。

Javascript 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
jquery 手势密码插件
Mar 17 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
javascript实现留言板功能
Feb 08 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
javascript实现列表滚动的方法
Jul 30 #Javascript
百度地图API之本地搜索与范围搜索
Jul 30 #Javascript
javaScript实现滚动新闻的方法
Jul 30 #Javascript
javascript中递归函数用法注意点
Jul 30 #Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 #Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 #Javascript
使用js复制链接中的部分文字的方法
Jul 30 #Javascript
You might like
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
详解Python中的各种函数的使用
2015/05/24 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python中for循环控制语句用法实例
2015/06/02 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Puppeteer使用示例详解
2019/06/20 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
软件测试企业面试试卷
2016/07/13 面试题
英语演讲稿范文
2014/01/03 职场文书
二年级语文教学反思
2014/02/02 职场文书
会计求职自荐信
2015/03/26 职场文书
工作会议通知
2015/04/15 职场文书
天那边观后感
2015/06/09 职场文书
讲座新闻稿
2015/07/18 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书