文档章节

jquery实现图片自动播放

Adam-Lee
 Adam-Lee
发布于 2012/03/09 13:15
字数 233
阅读 425
收藏 5

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
ul{ margin:0px;padding:0px;width:360px;}
li{ float:left; margin-left:10px; list-style-type:none;width:40px;background-color:#96EDE4;text-align:center;}
img{ width:166px;height:112px;}
#stop{ clear:both;}
</style>
<script src="jquery.js"></script>
</head>

<body>
<div><img src="img/1.gif" id='img1' /></div>
<div><ul><li id='1'>1</li><li id='2'>2</li><li id='3'>3</li></ul></div>
<div id='stop'><input type="button" value="停止自动播放"</div>


<script>
function showImg1(){
 $('#img1').attr('src','img/1.gif');
}
function showImg2(){
 $('#img1').attr('src','img/2.gif');
}
function showImg3(){
 $('#img1').attr('src','img/3.gif');
}
function autoShow(){
 setT1 = setTimeout('showImg2()',1000);
 setT2 = setTimeout('showImg3()',2000);
 setT3 = setTimeout('showImg1()',3000);
}

function clearTimeSet(){
 clearTimeout(setT1);
 clearTimeout(setT2);
 clearTimeout(setT3);
}

var int = setInterval("autoShow()",3000);

$('#stop').click(function(){
 clearTimeSet();
 int = window.clearInterval(int); 
})

$('li').mouseover(function(){

 if($(this).attr('id') == '1'){
   
  int = window.clearInterval(int);
  clearTimeSet();
  showImg1(); 
   
 }else if($(this).attr('id') == '2'){
  
  int = window.clearInterval(int); 
  clearTimeSet();
  showImg2();
  
 }else if($(this).attr('id') == '3'){
  
  int = window.clearInterval(int);
  clearTimeSet();
  showImg3(); 
 }
})

$('li').mouseout(function(){
 int = setInterval("autoShow()",3000);
})

</script>
</body>
</html>
                                                                                                                            

                                                                                                                             李汉团   Mar 9,2012

© 著作权归作者所有

Adam-Lee
粉丝 50
博文 118
码字总数 166965
作品 0
深圳
程序员
私信 提问
7 个简单实用的 jQuery 图片播放器

在网页特效中,我们经常会遇到需要循环播放图片的情况,比如首页上的广告轮播或者相册浏览等。如何简单的实现一款漂亮平滑的图片播放插件呢?下面就介绍几款非常不错的jQuery图片播放插件,希...

tp_wire
2012/08/14
7.5K
5
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
80
0
6 个效果震撼的 jQuery 图片播放器

很多时候,尤其是当我们需要展示或者宣传自己的产品时,我们都会用到图片轮播的特效,但是,选择什么样的图片播放器更实用、更美观、更大气呢?下面就给大家推荐几款简单实用却又美观大气的j...

tp_wire
2012/07/04
6.6K
10
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
2.5W
5
7 款风格各异的jQuery图片展示效果

在网页中,图片的展示方式多种多样,当然所要达到的目的也各不相同,本文就是要通过jQuery来实现各种不同的图片展示方式,有jQuery焦点图、图片缩放、图片滚动等效果。如果你喜欢这些小效果,...

yykj
2013/11/08
2.6K
1

没有更多内容

加载失败,请刷新页面

加载更多

金蝶EAS DEP 服务端 脚本

1、服务端执行SQL //服务端更新单据状态var imp = JavaImporter(); imp.importPackage(Packages.com.kingdee.eas.scm.im.inv); imp.importPackage(Packages.com.kingdee.eas.srt.comm......

路过饭堂门口
28分钟前
24
0
Hive之导出文件按逗号分隔到本地文件

如下所示,默认导出的是用\t分隔的,需要使用管道符进行转换,经常使用到,记录下. List-1 hive -e "SELECT * from student" | sed 's/\t/,/g' > /tmp/student.csv...

克虏伯
37分钟前
34
0
转置/解压缩功能(zip的反转)?

我有一个2项元组的列表,我想将它们转换为2个列表,其中第一个包含每个元组中的第一个项目,第二个列表包含第二个项目。 例如: original = [('a', 1), ('b', 2), ('c', 3), ('d', 4)]# an......

技术盛宴
54分钟前
53
0
小猪o2o系统v14.0升级v14.1攻略含小猪CMS微店铺和智慧店铺及小程序百项升级

首先我们要注意升级前的以下几个内容: 即 对环境的要求 网站需求PHP7.1 MYSQL5.1以上 Sw解密组件 解密组件在swoole-loader内 解压缩网站包 修改Conf/db.php内数据库文件 替换数据库内xxx.com...

my_gode
今天
107
0
「干货来袭」Github最全Nodejs资源集

今天给大家分享一下Github上面最全的Nodejs资源集awesome-nodejs,该项目聚合了nodejs各类优质资源,对自立于全栈开发或者想了解nodejs技术栈的开发同学极有帮助,有想进一步了解nodejs的千万...

gamedilong
今天
56
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部