用JQ写的源码如下：

实现功能：

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

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

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

存在BUG：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>自动轮播图片淡入淡出</title>
  6. 	<style>
  7. 	*{
  8. 		margin: 0;
  9. 		padding: 0;
  10. 	}
  11. 	div{
  12. 		margin-left:146px;
  13. 	}
  14. 	img{
  15. 		width: 320px;
  16. 		height: 440px;
  17. 		margin-top:10px;
  18. 		margin-bottom: 10px;
  19. 	}
  20. 	body{
  21. 		background: #000;
  22. 	}
  23. 	</style>
  24. 	<script src="jquery.js"></script>
  25. 	<script>
  26.  
  27. 					//执行定时器让图片淡入淡出；
  28.  				var n=0;
  29. 				function res () {
  30. 					 $("img").fadeTo(500,0.1);	//所有的图片淡入；
  31. 					 $("img").eq(n).fadeTo(500,1); //指定图片淡出；
  32. 					  n++;							//遍历所有的图片
  33. 					 if(n>9){					//判断下标
  34. 					 	n=0;
  35. 					 }
  36. 				}
  37. 				var str=setInterval("res()",1000);  //定时器 1秒执行一次res这个定时器
  38.  
  39. 		  	  $(function  () {				//当页面加载时；
  40. 					$("img").mouseenter(function () {	//当鼠标经过时，
  41. 						   clearInterval(str);	 //停止定时器
  42.  
  43. 				     	$("img").fadeTo(500,0.1)  //让图片恢复初始状态
  44. 						 $(this).fadeTo(1000,1).siblings().fadeTo(0,0.1);		//鼠标停在的图片上淡出,其他图片恢复初始0.1透明度
  45. 					    	n = $(this).index()+1;	//让图片的下标等于鼠标停在的图片的下一张图
  46.  
  47. 					});	
  48.  
  49. 					$("img").mouseleave(function () {     //当鼠标离开的时候；
  50. 				      str=setInterval("res()",1000);    //继续调用定时器，并让定时器的返回值等于str
  51. 					});
  52. 	        });
  53. 	</script>
  54. </head>
  55. <body>
  56. 	<div>
  57. 	<img src="data:image/1.jpg" >
  58. 	<img src="data:image/2.jpg" >
  59. 	<img src="data:image/3.jpg" >
  60. 	<img src="data:image/4.jpg" >
  61. 	<img src="data:image/5.jpg" >
  62. 	<img src="data:image/6.jpg" >
  63. 	<img src="data:image/7.jpg" >
  64. 	<img src="data:image/8.jpg" >
  65. 	<img src="data:image/9.jpg" >
  66. 	<img src="data:image/10.jpg">
  67. 	</div>
  68. </body>
  69. </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. 详解NTFS文件系统

    一.分析NTFS文件系统的结构 当用户将硬盘的一个分区格式化为NTFS分区时,就建立了一个NTFS文件系统.NTFS文件系统同FAT32文件系统一样,也是用“簇”为存储单位,一个文件总是占用一个或多个 ...

  2. Android课程---手机尺寸相关的概念 +尺寸单位+关于颜色

    手机的尺寸: 屏幕对角线的长度,单位为英寸(2.54cm) 手机的分辨率: 屏幕能显示的像素的数量, 一般用在长方向上数量*宽方向上数量来表达 手机的像素密度: pixels per inch,也称P ...

  3. 使用PowerShell向SharePoint中写入数据

    本文介绍了如何在命令行方式下, 创建自定义列表, 将外部数据导入到列表以及生成视图. $listname = "contact0422" $column_text = @( &qu ...

  4. 自己用node.js 搭建APP服务器，然后用AFNetworking 请求 报如下错误：App TransportSecurity has blocked a cleartext HTTP (http://) resource load since it isinsecure. Temporary exceptions can be configured via your app's Info.

    "App TransportSecurity has blocked a cleartext HTTP (http://) resource load since it isinsecure ...

  5. mysql集群 MySQL Cluster

    <?php /* 郑重说明2015年6月11日16:28:14,目前为止MySQL Cluster 社区版不支持INNODB,商业版支持,但是授权价格20W左右,so看此文档之前,考虑下钱 My ...

  6. 解决Sublime Text 3 Package Control 问题

    我使用的环境是 Mac OS X 10.11.5. 安装Packet Control之后,尝试安装插件,出现如下问题: There are no packages available for inst ...

  7. IHttpModule

    随便写一个类继承IHttpModule 实现IHttpModule中的两个方法 Init() Dispose() public void Init(HttpApplication context) { ...

  8. 白话学习MVC(八)Action的执行二

    一.概述 上篇博文<白话学习MVC(七)Action的执行一>介绍了ASP.NET MVC中Action的执行的简要流程,并且对TempData的运行机制进行了详细的分析,本篇来分析上一篇 ...

  9. tapping of data 词义来源

    tapping of data 在数据交互的过程 数据被 窃听到. 例如, 网站的账户被泄露, 在用户登陆过程中, 其账号被第三方偷到. tapping 含义 看看 youdao 词典解释: n. [ ...

  10. nginx限制访问速度

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