<!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. stickUp让页面元素“固定”位置

    stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置. http://www.bootcss.com/p/stickup/

  2. 如何在Mac系统里面更新 Ansible 的 Extra Modules

    最近遇到一个问题 seport is not a legal parameter in an Ansible task or handler 原因是我本地 Ansible 的 Extra Module ...

  3. Balloons（山东省第一届ACM省赛）

    Balloons Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Both Saya and Kudo like balloons ...

  4. Ajax跨域访问

    Ajax如何跨域访问数据 最近在做项目的过程中遇到的问题,一个网站需要访问另外一个网站的数据,并且是通过脚本的方式,而由于同源策略的限制,开发人员不能再与外部服务器进行通信的时候使用XMLHttpRe ...

  5. Oracle数据库监听服务无法启动

    (1) 安装好Oracle后,启动Net Manager,测试orcl失败,报错“ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务”,需要修改监听文件.修改前: # list ...

  6. php SimpleXML 例子

    $txt = GetRemoteText($url); if(strlen($txt) > 0) { $xml = simplexml_load_string($txt); //获取xml if ...

  7. ExpressJs server中Router的设置

    expressjs的路由设置方法 一.基本方法: app.METHOD(PATH, HANDLER)把路径path和操作方法method(可以是http的get/put/delete等),映射到一个处 ...

  8. JS中的split

    个人理解spilt函数是javascript中字符串和正则表达式的一个联合应用.功能是根据指定的正则表达式(如果是字符串的话也会转为正则表达式)对字符串进行分割.返回值是一个被分割后的字符串数组. 最 ...

  9. Geodatabase数据模型

    1  Geodatabase概念 Geodatabase是ArcInfo8引入的一种全新的面向对象的空间数据模型,是建立在DBMS之上的统一的.智能的空间数据模型.“统一”是指,Geodatabase ...

  10. 如何创建vss2005的数据库

    配置如下 VSS手工创建数据库的步骤(设数据库根目录为D:\VSS): 1.在根目录中创建名为srcsafe.ini(全局配置文件)的文件,文件内容如下: Data_Path = data Temp_ ...