脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS特效实现图片自动播放并可控的效果

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

 更新时间：2015年07月31日 09:04:15   作者：html5前端技术分享  
这篇文章主要介绍了JS代码实现图片自动播放并可控的效果,需要的朋友可以参考下

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

代码如下：
<!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实现图片自动播放并可控的效果，希望对大家有所帮助。

您可能感兴趣的文章:

相关文章

  • 不使用中间变量，交换int型的 a, b两个变量的值。

    不使用中间变量，交换int型的 a, b两个变量的值。

    群中的题目，不过这样大众脸的题想必大家都见过，就看能玩出什么新花招
    2010-10-10
  • JS滚轮事件onmousewheel使用介绍

    JS滚轮事件onmousewheel使用介绍

    鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到 Mousewheel 事件，感兴趣的朋友可以了解下
    2013-11-11
  • MVVM模式中ViewModel和View、Model有什么区别？

    MVVM模式中ViewModel和View、Model有什么区别？

    这篇文章主要介绍了MVVM模式中ViewModel和View、Model有什么区别？本文分别解释了它们的功能和作用,然后总结了它之间的区别,需要的朋友可以参考下
    2015-06-06
  • js实现简单模态框实例

    js实现简单模态框实例

    这篇文章主要为大家详细介绍了js实现简单模态框实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript利用Date实现简单的倒计时实例

    JavaScript利用Date实现简单的倒计时实例

    在日常开发的时候经常遇到关于倒计时的需求，下面这篇文章就给主要介绍了JavaScript利用Date实现倒计时效果的方法示例，文中主要实现了倒计时和倒计时结束抢购的按钮才可以被点击的效果，有需要的朋友可以参考借鉴。
    2017-01-01
  • 前端检测用户登录状态是否过期的几种方法

    前端检测用户登录状态是否过期的几种方法

    这篇文章主要介绍了在前端开发中判断用户登录状态是否过期的方法,包括检查令牌有效期、定时轮询服务器、全局请求拦截器和利用Web存储中的时间戳,文章还讨论了在特定场景下如何实现优雅降级,以避免中断用户操作,需要的朋友可以参考下
    2024-11-11
  • 用IE重起计算机或者关机的示例代码

    用IE重起计算机或者关机的示例代码

    本篇文章主要是对用IE重起计算机或者关机的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • JavaScript中setInterval()用法举例详解

    JavaScript中setInterval()用法举例详解

    这篇文章主要给大家介绍了关于JavaScript中setInterval()用法的相关资料,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 微信小程序环境下将文件上传到OSS的方法步骤

    微信小程序环境下将文件上传到OSS的方法步骤

    这篇文章主要介绍了微信小程序环境下将文件上传到OSS的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • C#中TrimStart,TrimEnd,Trim在javascript上的实现

    C#中TrimStart,TrimEnd,Trim在javascript上的实现

    今天在后台写了个类,后来才发现,需要在JS上做..于是把代码拷到js上进行修改,代码中用到TrimStart,TrimEnd,Trim等方法,在网上找半天竟然没找到.要么就只能清除空格的!
    2011-01-01

最新评论