用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. 算法与数据结构题目的 PHP 实现：栈和队列 由两个栈组成的队列

    思路:同样使用 PHP 的数组模拟栈.栈的特点是先进后出,队列的特点是先进先出,可以用第一个栈(StackPush)作为压入栈,压入数据的时候只往这个栈中压入数据,第二个栈作(StackPop)为弹出 ...

  2. vba 工作案例1

    手上有一份关于广东22个地市的数据,行列不符合预期的表结构,稍vba转换下,再text import 到oracle. Sub copy() ' ' copy 宏 ' ' 快捷键: Ctrl+Shif ...

  3. 10/12 study

    [患者版]加号选择页: 这是四个TableView放在Scrollview上 上面是个xib封装的view 整体就是个scrollView,用xib摆上去的控件:   上面加了黄条,旧的控件统一修改y ...

  4. SQLite核心函数一览

    abs(X) abs(X)返回 X 的绝对值. Abs(X) returns NULL if X is NULL. Abs(X) return 0.0  if X is a string or blo ...

  5. easyUI loyout tabs自适应宽度

    index.html 页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  6. 几个常见Win32 API函数

    1.获取客户区矩形区域 RECT cliRect; GetClientRect(hWnd, &cliRect); 2.获取窗口上下文句柄 HDC hdc = GetDC(hWnd);//... ...

  7. Anaconda安装与使用

    bash Anaconda.....sh命令安装成功 安装位置:/home/amelie/anaconda2 修改路径:vi ~/.bashrc vi编辑器在最后写上:export PATH=/hom ...

  8. Scala 流程空间，函数，异常处理

    1,)首先留意一下下边的代码块,他是怎么运行的,貌似在c#中他是出错的,不应该出现这样的写法的,但在scala中侧不然: package com.dt.study /** * The package ...

  9. 卷积神经网络CNN(Convolutional Neural Networks)没有原理只有实现

    零.说明: 本文的所有代码均可在 DML 找到,欢迎点星星. 注.CNN的这份代码非常慢,基本上没有实际使用的可能,所以我只是发出来,代表我还是实践过而已 一.引入: CNN这个模型实在是有些年份了, ...

  10. YL-64 颜色传感器

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