autoPlay 基于jquery的图片自动播放效果

效果图:

实现代码:


代码如下:

<html>
<head>
<title>Jquery 自动轮播效果</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.spanhide{display: none;}
#top a:hover{color: red;}
</style>
</head>
<body>
<div id = "main">
<div id = "top">
<a href="javascript:void(0)">1</a>
<a href="javascript:void(0)">2</a>
<a href="javascript:void(0)">3</a>
<a href="javascript:void(0)">4</a>
<a href="javascript:void(0)">5</a>
</div>
<div id = "tbody">
<span> <img src="images/24877.jpg" /> </span>
<span class="spanhide"> <img src="images/74389.gif" /> </span>
<span class="spanhide"> <img src="images/77904.jpg" /> </span>
<span class="spanhide"> <img src="images/81177.jpg" /> </span>
<span class="spanhide"> <img src="images/93144.jpg" /> </span>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var i = 0;
var f = 0;
var t;
var tops = $("#top a");
var tl = tops.length;
var bodys = $("#tbody span");
tops.mouseover(function(){
i = $.inArray(this,tops);
bodys.hide().eq(i).show();
i++;
i = i>=tl?0:i;
if (f == 1) {
t = setTimeout(mmover,2000);
}
else{
stop();
}
f = 0;
});
bodys.mouseover(function(){
stop();
});
bodys.mouseout(function(){
t = setTimeout(mmover,2000);
});
tops.mouseout(function(){
t = setTimeout(mmover,2000);
});
mmover();
function stop(){
clearTimeout(t);
}
function mmover(){
f = 1;
tops.eq(i).mouseover();
}
});
</script>
</html>

赞 (0)

相关推荐

  • 关于Android HTML5 audio autoplay无效问题的解决方案

    前言:在android HTML5 开发中有不少人遇到过 audio 标签 autoplay在某些设备上无效的问题,网上大多是讲怎么在js中操作,即在特定的时刻调用audio的play()方法,在android上还是无效. 一.解决方案 在android 4.2添加了允许用户手势触发音视频播放接口,该接口默认为 true ,即默认不允许自动播放音视频,只能是用户交互的方式由用户自己促发播放. WebView webView = this.finishActivity(R.id.main_act_

  • autoPlay 基于jquery的图片自动播放效果

    autoPlay 基于jquery的图片自动播放效果

    效果图:实现代码: 复制代码 代码如下: <html> <head> <title>Jquery 自动轮播效果</title> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <style> .spanhide{display: none;} #top a:hover{color: red;}

  • JS实现图片自动播放效果

    JS实现图片自动播放效果

    本文实例为大家分享了JS实现图片自动播放效果的具体代码,供大家参考,具体内容如下 JS实现图片自动播放 1.先看效果图 2.完整代码 <!DOCTYPE html> <html> <head> <style> /* 定义样式 */ body{ margin: 5% 30%; } .bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-s

  • 基于jQuery实现图片推拉门动画效果的两种方法

    ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g

  • 基于jquery实现图片广告轮换效果代码

    基于jquery实现图片广告轮换效果代码

    效果图:实现代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

  • 基于jQuery实现照片墙自动播放特效

    基于jQuery实现照片墙自动播放特效

    一个动态展示图片的页面: 功能:定时从后台取数据,进行页面图片追加.对已经在页面中的图片,进行放大缩小动画展示.目前我们用于微信新关注用户头像展示. <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1

  • 基于JQuery实现图片轮播效果(焦点图)

    基于JQuery实现图片轮播效果(焦点图)

    自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize. 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改. 效果图如下: Html代码如下: <html> <head> <meta charset="utf-8"> <title&

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

    不多说了,实现方法请看下面代码. 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" /> <link re

  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • Android使用自定义属性实现图片自动播放滚动的功能

    大家好,记得上次我带着大家一起实现了一个类似与淘宝客户端中带有的图片滚动播放器的效果,但是在做完了之后,发现忘了加入图片自动播放的功能(或许是我有意忘记加的.....),结果图片只能通过手指滑动来播放.于是今天我将再次带领大家,添加上之前遗漏的功能,让我们的图片播放器更加完善. 这次的程序开发将完全基于上一次的代码,如果有朋友还未看过上篇文章,请先阅读Android实现图片滚动和页签控件功能的实现代码. 既然是要加入自动播放的功能,那么就有一个非常重要的问题需要考虑.如果当前已经滚动到了最后一张

  • 一款基于jQuery的图片场景标注提示弹窗特效

    一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码 代码如下: <div class="container"

随机推荐