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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
js实现日历
Nov 07 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实现俄罗斯乘法实例
2015/03/07 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
Python中的推导式使用详解
2015/06/03 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python清除函数占用的内存方法
2018/06/25 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
pytorch的batch normalize使用详解
2020/01/15 Python
vscode调试django项目的方法
2020/08/06 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
全国道德模范事迹
2014/02/01 职场文书
实践单位评语
2014/04/26 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年超市工作总结
2015/04/09 职场文书
员工规章制度范本
2015/08/07 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS