用JQ写的源码如下：

实现功能：

1，图片自动按顺序轮播，轮播选中的图片透明度为1，其他为0.1；

　　　　2，鼠标停在的图片上透明度为1，其他为0.1；

　　　　3，鼠标离开，继续轮播，起始位置为鼠标停在的图片的下一张图片；

存在BUG：

　　　　当鼠标在多个图片上滑动的时候，图片的轮播顺序会被打乱！

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>自动轮播图片淡入淡出</title>

	<style>

	*{

		margin: 0;

		padding: 0;

	}

	div{

		margin-left:146px;

	}

	img{

		width: 320px;

		height: 440px;

		margin-top:10px;

		margin-bottom: 10px;

	}

	body{

		background: #000;

	}

	</style>

	<script src="jquery.js"></script>

	<script>

					//执行定时器让图片淡入淡出；

 				var n=0;

				function res () {

					 $("img").fadeTo(500,0.1);	//所有的图片淡入；

					 $("img").eq(n).fadeTo(500,1); //指定图片淡出；

					  n++;							//遍历所有的图片

					 if(n>9){					//判断下标

					 	n=0;

					 }

				}

				var str=setInterval("res()",1000);  //定时器 1秒执行一次res这个定时器

		  	  $(function  () {				//当页面加载时；

					$("img").mouseenter(function () {	//当鼠标经过时，

						   clearInterval(str);	 //停止定时器

				     	$("img").fadeTo(500,0.1)  //让图片恢复初始状态

						 $(this).fadeTo(1000,1).siblings().fadeTo(0,0.1);		//鼠标停在的图片上淡出,其他图片恢复初始0.1透明度

					    	n = $(this).index()+1;	//让图片的下标等于鼠标停在的图片的下一张图

					});	

					$("img").mouseleave(function () {     //当鼠标离开的时候；

				      str=setInterval("res()",1000);    //继续调用定时器，并让定时器的返回值等于str

					});

	        });

	</script>

</head>

<body>

	<div>

	<img src="data:image/1.jpg" >

	<img src="data:image/2.jpg" >

	<img src="data:image/3.jpg" >

	<img src="data:image/4.jpg" >

	<img src="data:image/5.jpg" >

	<img src="data:image/6.jpg" >

	<img src="data:image/7.jpg" >

	<img src="data:image/8.jpg" >

	<img src="data:image/9.jpg" >

	<img src="data:image/10.jpg">

	</div>

</body>

</html>

定时器图片轮播淡入淡出基本功能已实现，正在修改BUG中。。（附图效果和源代码）的更多相关文章

  1. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  2. 图片轮播(Jquery)

    昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用. 经过调整和整合,完成了第一版本的jquery. ...

  3. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  4. JavaScript图片轮播器

    先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...

  5. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. AdPlayBanner：功能丰富、一键式使用的图片轮播插件

    AdPlayBanner:功能丰富.一键式使用的图片轮播插件 AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresc ...

  7. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  8. 个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  9. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

随机推荐

  1. Unity学习疑问记录之隐藏与显示物体

    Unity3D中隐藏与显示物体的一些操作 http://unity3d.9tech.cn/news/2013/0930/33019.html

  2. AccessViolationException: 尝试读取或写入受保护的内存。这通常指示其他内存已损坏。

    在使用SqlConnection.Open()连接到SQL Server 2008 R2 SP2时,一直报以下异常: AccessViolationException: 尝试读取或写入受保护的内存.这 ...

  3. php读取文件里面的数组做为配置文件

    可能大家也都见过很多开源的产品,大多它们的配置文件都存放在一个单独的文件中,而这个文件里只存放了一个数组,其实这里运用了一个PHP的小技巧,就是可以将文件包含进来,并且赋值给一个变量,这个变量就具有了 ...

  4. python中的Queue

    一.先说说Queue(队列对象) Queue是python中的标准库,可以直接import 引用,之前学习的时候有听过著名的“先吃先拉”与“后吃先吐”,其实就是这里说的队列,队列的构造的时候可以定义它 ...

  5. LoadRunner，一个简单的例子

    一.录制脚本,这个就不说了,但是可以说说录完一个简单的脚本之后可以做的一些后续工作 1.设置事务的开始跟结束点(参考他人的http://www.cnblogs.com/fnng/archive/201 ...

  6. JS 的trim()

    去除字符串左右两端的空格,在vbscript里 可  用 trim.ltrim 或 rtrim,但 js 却没有这 3个 内置方法,需 手工编写.下面的实现方法  用到 正则表达式,效率不错, 把 三 ...

  7. Qunie问题

    Quine 以哲学家 Willard van Orman Quine (1908-2000) 而命名,表示一个可以生成他自己的完全的源代码的程序.编写出某个语言中最简短的 quine 通常作为黑客们的 ...

  8. Objective-C 编码建议

    Objective-C 是 C 语言的扩展,增加了动态类型和面对对象的特性.它被设计成具有易读易用的,支持复杂的面向对象设计的编程语言.它是 Mac OS X 以及 iPhone 的主要开发语言. C ...

  9. iOS应用架构谈 网络层设计方案

    网络层在一个App中也是一个不可缺少的部分,工程师们在网络层能够发挥的空间也比较大.另外,苹果对网络请求部分已经做了很好的封装,业界的AFNetworking也被广泛使用.其它的ASIHttpRequ ...

  10. 打开VS调试不进入开发的网站直接跳转到主页

    重启了熟悉有卸载IE11的,搞了好几个小时 最后把电脑管家里的锁定主页打开就好了! 很久之后  我再锁上  也没有这问题了