用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. Java Collection框架详解

    引用自:http://blog.sina.com.cn/s/blog_6d6f5d7d0100s9nu.html 经常会看到程序中使用了记录集,常用的有Collection.HashMap.HashS ...

  2. mysql5.5手册读书日记(3)

    <?php /* MySQL_5.5中文参考手册 587开始 与GROUP BY子句同时使用的函数和修改程序 12.10.1. GROUP BY(聚合)函数 12.10.2. GROUP BY修 ...

  3. Google Chrome浏览器中如何使用命令

    Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome 1 2 3 分步阅读 Google Chrome浏览器有很多的特 ...

  4. ExtJS笔记 Grids

    参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces ...

  5. 类似网易新闻 title栏 滚动时 文字放大&变色

    http://files.cnblogs.com/files/n1ckyxu/ScrollTitleView.zip

  6. CSS水平居中

    三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...

  7. HTML其他基本格式说明

    1.<!DOCTYPE>说明页面中使用的HTML版本,只是信息声明 2.元信息元素<meta>,通过属性定义文件信息的名称.内容.文档的关键字.作者及描述等..content内 ...

  8. ultraedit正则使用

    下面是从UltraEdit文档中摘录的语法说明: 正则表达式 (UltraEdit 语法): 符号 功能 % 匹配行首 – 表示搜索字符串必须在行首,但不包括任何选定的结果字符中的行终止字符. $ 匹 ...

  9. webstorm svn 报错

    webstorm    svn 报错Cannot run program "svn": CreateProcess error=2, The system cannot find ...

  10. android如何获取到启动类的包和类路径

    ArrayList<String> list = new ArrayList<String>(); private List<ResolveInfo> mApps; ...