用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. Android课程---表格布局TableLayout

    特别注意:由于表格布局继承自线性布局,因此并不显示表格线 示例代码: <?xml version="1.0" encoding="utf-8"?> ...

  2. 使用eclipse开发servlet

    package cn.itcast; import java.io.IOException; import javax.servlet.GenericServlet; import javax.ser ...

  3. FastDFS connect timed out

    java.net.SocketTimeoutException: connect timed outUpload file "1003.png"fails:connect time ...

  4. thinkphp3.2整合phpexcel

    由于thinkphp3.2使用命名空间,而 PHPExcel没有使用,那么两者整合的最重要问题就是如何导入的问题. 一.PHPExcel.php和PHPExcel文件夹都放在ThinkPHP/Libr ...

  5. Redis和Memcache对比及选择(转载)

  6. 蓝牙物理链路类型：SCO和ACL链路

    蓝牙物理链路ACL(Asynchronous Connectionless), 另外的一种链路是SCO(Synchronous Connection Oriented)主要用来传输对时间要求很高的数据 ...

  7. UIBarButtonItem的创建

    1. rightBarButtonItem的创建 -(void)initRightBar{ UIBarButtonItem *done =[UIBarButtonItem rightItemWithT ...

  8. Vcenter server 5.5安装部署

    1.安装VMware ESXi Server 虚拟主机安装方法请看本人博客 "实践记忆": http://www.cnblogs.com/zoulongbin/p/5896836. ...

  9. nginx限制访问速度

    转自:http://siwei.me/blog/posts/nginx-ip 参考:http://tengine.taobao.org/document_cn/http_limit_req_cn.ht ...

  10. YL-64 颜色传感器

    TCS3200颜色传感器是一款全彩的颜色检测器,包括了一块TAOS TCS3200RGB感应芯片和4个白光LED灯,TCS3200能在一定的范围内检测和测量几乎所有的可见光.它适合于色度计测量应用领域 ...