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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
JavaScript实现点击自制菜单效果
Feb 02 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+MSSQL分页的例子
2006/10/09 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php中namespace及use用法分析
2016/12/06 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
python调用fortran模块
2016/04/08 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python实现的config文件读写功能示例
2019/09/24 Python
python给list排序的简单方法
2020/12/10 Python
Python绘制数码晶体管日期
2021/02/19 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
根叔历年演讲稿
2014/05/20 职场文书
励志演讲稿800字
2014/08/21 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
校园开放日新闻稿
2015/07/17 职场文书
golang中的struct操作
2021/11/11 Golang
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
Nginx 匹配方式
2022/05/15 Servers
如何基于python实现单目三维重建详解
2022/06/25 Python