<!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. Linux系统的压缩技术

    1.常见的压缩文件扩展名 *.Z ---> compress程序压缩的文件. *.gz --->gzip 程序压缩的文件: *.bz2------>bzip2程序压缩的文件: *.t ...

  2. 【转】ORACLE定期清理INACTIVE会话

    源地址:http://www.cnblogs.com/kerrycode/p/3636992.html ORACLE数据库会话有ACTIVE.INACTIVE.KILLED. CACHED.SNIPE ...

  3. java如何提取url里的域名

    使用java标准类库java.net.URL java.net.URL  url = new  java.net.URL("http://blog.csdn.net/zhujianlin19 ...

  4. python字符串的编码格式

    参考网站: http://www.cnblogs.com/siqi/archive/2012/11/10/2763598.html 环境: win7 x64 python v2.7.10 结论: 1 ...

  5. slickedit的alias配置

    使用slickedit很喜欢它的多语言支持,可以快速查看变量的定义和结构.我一般写verilog较多,使用emcas很方便,但是感觉查看代码结构不太方便(也可能是我不会设置).所以希望能够在slick ...

  6. Bigendian 奇数内存地址取整形crash

    在大端机器(solaris-sparc,hpux-hppa)上从奇数内存地址取一个整形(2 or 4 bytes)会崩溃.如: unsigned short Res = *(unsigned shor ...

  7. 剑指Offer:面试题30——最小的k个数(java实现)

    问题描述: 输入n个整数,找出其中最小的k个数 思路1: 先排序,再取前k个 时间复杂度O(nlogn) 下面给出快排序的代码(基于下面Partition函数的方法) public void Quic ...

  8. 慕课网-Java入门第一季-7-1 如何定义 Java 中的方法

    来源:http://www.imooc.com/code/1577 所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法 ...

  9. Web前端工程师

    前端开发,不仅仅是需要会写页面而已,还需要具备很多技能,现做如下总结: 会点设计,不要求精湛,处理图片,设计个小广告是要的: 精通HTML+CSS,并能快速处理各浏览器兼容问题: 熟练掌握Javasc ...

  10. Spring集成Memcached三种方式(一)

    转载:http://blog.csdn.net/u013725455/article/details/52102170 Memcached Client目前有3种: Memcached Client ...