<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>gakki</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html, body{
			position: relative;
			width: 100%;
			height: 100%;
		}
		#wrap{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 512px;
			height: 384px;
		}
		#wrap .inner{
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
		#wrap .bgPicture{
			width: 100%;
			height: 100%;
			background: url('http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg') 50% 50% no-repeat;
		}
		#wrap .pic{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 2;
		}
		#wrap .pic .inner{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			list-style: none;
		}
		#wrap .icon{
			position: absolute;
			left: 50%;
			top: 90%;
			transform: translate(-50%, -50%);
			height: 18px;
			line-height: 18px;
		}
		#wrap .icon span{
			display: inline-block;
			width: 10px;
			height: 10px; /*不知道为什么span和span之间有8px间距*/
			border-radius: 50%;
			border: 1px solid #d67ed6;
			z-index: 2;
		}
		#wrap .icon span:hover{
			background-color: #d67ed6;
			opacity: 0.2;
			filter: alpha(opacity=20);
		}
		#wrap .icon span.active{
			background-color: #d67ed6;
			opacity: 0.6;
			filter: alpha(opacity=60);
			height: 15px;
			border-radius: 30%;
		}
		#wrap .arrow{
			position: absolute;
			width: 30px;
			height: 50px;
			background-color: rgba(150,150,150,0.5);
			border-radius: 5px;
			text-align: center;
			line-height: 50px;
			font-size: 22px;
			font-weight: bold;
			color: #fff;
			z-index: 2;
		}
		#wrap .arrow:hover{
			background-color: rgba(150,150,150,0.7);
			color: #ddd;
		}
		#wrap .pre{
			left: 1%;
			top: 50%;
			transform: translateY(-50%);
		}
		#wrap .next{
			right: 1%;
			top: 50%;
			transform: translateY(-50%);
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="inner">
			<div class="bgPicture"></div>
			<div class="pic">
				<a href="http://www.qdfuns.com/notes/27497/81d5010245e3a9225e21f8d3a9b475a6.html" target="_blank"><div class="inner"></div></a>
			</ul>
			<div class="icon">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="arrow pre"><</div>
			<div class="arrow next">></div>
		</div>
	</div>
	<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var n = 0;
			var $wrap =  $("#wrap"),
			    $btn = $wrap.find('.icon>span'),
			    $bgPic = $wrap.find('.bgPicture'),
			    $link = $wrap.find('.pic a');
			var url = ["http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg"],
				href = ["http://www.qdfuns.com/notes/27497/81d5010245e3a9225e21f8d3a9b475a6.html","http://www.qdfuns.com/notes/27497/97b77870e523299cbf2be9ebf6023e00.html","http://www.qdfuns.com/notes/27497/d158ce3e48cd86b2d2ab5182ca65b7ad.html","http://www.qdfuns.com/notes/27497/7ec7ce8bcc074fe3c721b59cfcf7cb52.html","http://www.qdfuns.com/notes/27497/1b763c1383ac0d2a1f3927557379b63b.html"];

			/*span按钮的函数&调用picFade函数*/
			function slide(){
				n = n>=$btn.length-1?0:++n;
				$btn.eq(n)
					.siblings().removeClass('active')
					.end().addClass('active');
				picFade();
			}

			/*封装图片淡入淡出函数*/
			function picFade(){
				var curHref = href[n];
				var curUrl = url[n];
				$bgPic.fadeTo('slow', 0.4, function() {
					$bgPic.css('background-image', 'url("'+curUrl+'")')
						.fadeTo('slow', 1, function(){
							$link.attr('href', curHref);
						});
				});
			}

			/*自动轮播*/
			var timer = setInterval(slide, 5000);

			/*小按钮绑定点击事件*/
			$btn.on('click', function(event) {
				clearInterval(timer);
				n = $(this).index()-1;
				slide();
				timer = setInterval(slide, 5000);
			});

			/*向前前后按钮绑定事件*/
			$wrap.find('.arrow').on('click', function(event) {
				if (!$bgPic.is(':animated')) {
					clearInterval(timer);
					n = $(this).hasClass('pre')?n-2:n;
					if (n<0) {n=n+5}
					slide();
					timer = setInterval(slide, 5000);
				}
			});
		});
	</script>
</body>
</html>

　　

jquery实现幻灯片的更多相关文章

  1. 一款经典的jQuery slidizle 幻灯片

    jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...

  2. Jquery Slick幻灯片插件

    slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...

  3. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  4. jquery bxslider幻灯片样式改造

    找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样 ...

  5. 经典的一款jQuery soChange幻灯片

    soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...

  6. jQuery orbit 幻灯片

    在线实例 默认 带缩略图 带描述 使用方法 <div class="wrap" style="width: 565px; height: 290px; margin ...

  7. 【jquery】幻灯片效果

    闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

  8. jQuery Flickerplate 幻灯片

    Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb.它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备 在线实例 默认 圆点导航位置 动画方式 深色主题 H ...

  9. 经典实用jQuery soChange幻灯片实例演示

    soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...

随机推荐

  1. CentOS下安装LAMP环境

    1.安装Apache yum -y install httpd # 开机自启动 chkconfig httpd on # 启动httpd 服务 service httpd start #安装apach ...

  2. 02-C#入门（枚举、结构等）

    不要为了写笔记而学习!!! 其实学完一章再返回复习,然后做笔记,真的很费时间(电子书还不方便).当然,复习带来的价值,是值得花时间的. 枚举.结构 枚举的类型有限(short.byte...)且是相同 ...

  3. linux命令-dd {拷贝并替换}

    一 命令解释: dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: if=文 ...

  4. 如何将win7变为wifi热点

    以前经常使用connectify软件一键设置win7热点,但发现该软件影响开机速度,于是研究了一下win7自带的wifi功能,简单方便,分享如下: 1.打开命令提示符: [开始]/搜索框中输入“cmd ...

  5. 【原创翻译】初识Unity中的Compute Shader

    一直以来都想试着自己翻译一些东西,现在发现翻译真的很不容易,如果你直接把作者的原文按照英文的思维翻译过来,你会发现中国人读起来很是别扭,但是如果你想完全利用中国人的语言方式来翻译,又怕自己理解的不到位 ...

  6. source tree 推送错误解决

    fatal: The remote end hung up unexpectedly 出现这个问题是因为文件过大 解决办法: 打开git bash 输入git config --global http ...

  7. 查询oracle连接数 对应的 应用程序

     select  b.MACHINE, b.PROGRAM , count(*) from v$process a, v$session b where a.ADDR = b.PADDR and  b ...

  8. 安装SQl 2008为SQL Server代理服务提供的凭据无效

    解决:安装SQl 2008为SQL Server代理服务提供的凭据无效 sql server 2008 代理服务提供的凭据无效sql server 2008 代理服务提供的凭据无效在Windows S ...

  9. Maven(二)使用eclipse创建maven多模块项目

    maven作为一种自动化构建工具,在现在的企业应用开发中运用非常普遍. 企业项目一般都比较大,多采用maven管理的多模块项目,下面直接上创建步骤 一.创建一个maven项目

  10. 慕课网-Java入门第一季-6-7 使用 Arrays 类操作 Java 中的数组

    来源:http://www.imooc.com/code/1556 Arrays 类是 Java 中提供的一个工具类,在 java.util 包中.该类中包含了一些方法用来直接操作数组,比如可直接实现 ...