用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. HSV色彩空间

    HSV是把H(色相),S(饱和度),V(亮度)当做色值来定位颜色的空间.色相的取值范围是0~360度,用来表示颜色的类别.其中红色是0度,绿色是120度,蓝色是240度.饱和度的取值范围是0%~100 ...

  2. Linux内核总结

    1.文件系统就是数据的存储结构,不要以为你的硬盘存储东西理所当然,没有文件系统,你存的只是0010101101100 2.内存管理是计算机运行时内存的分配和使用. 3.进程管理就是说每次执行一个程序都 ...

  3. Jenkins中Jelly基础、超链接、国际化

    Jelly基础 参考:https://wiki.jenkins-ci.org/display/JENKINS/Basic+guide+to+Jelly+usage+in+Jenkins UI Samp ...

  4. loadrunner获取返回值为乱码

    找了很多方法,utf-8也设置了,还是不行,只有有转码方法了 web_reg_save_param("res2", "LB=\"msg\":\&quo ...

  5. bootstrap插件学习

    转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button& ...

  6. Java简单类（部门、领导、雇员关系）

    class Dept { private int deptno ; private String dname ; private String loc ; private Emp emps [] ; ...

  7. thinkphp3.2 cli模式的正确使用方法

    最近要使用thinkphp3.2版本的cli模式,手动执的话没有问题,比如php /www/index.php home/article/get 这样没有问题,但是一般用cli模式都是定时任务比较多, ...

  8. 关于Currency类型和 TCurrencyFiled的悲剧

    这2天程序出问题, 用户结算金额经常莫名其妙的多出了小数点后几位, 不用思考 肯定是因为浮点精度不准确的问题 查了一下, 程序中的数据类型使用的是Currency, 按照数据类型的描述, 这个金额类型 ...

  9. java API 知识：截取特殊标识之前的字符串

    一: double a = 23.36; String b = String.valueOf(a); String d = b.substring(, b.lastIndexOf(".&qu ...

  10. linux 服务器对拷命令scp

    1.今天在进行linux下服务部署时由于重新部署的繁杂,所以我决定用scp命令在linux线上服务器(A)拷贝一份服务程序到现有的服务器(B)上: 具体的操作命令是:scp -r A_username ...