<!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. vue组件一

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Sybase

    Variable Naming Convention first character can be alphabetic character, _, @. Followed by alphabetic ...

  3. 为不同版本的 Windows 编写驱动程序

    MSDN原文:https://msdn.microsoft.com/zh-cn/library/windows/hardware/ff554887(v=vs.85).aspx 创建驱动程序项目时,指定 ...

  4. Centos 7 在VBox下不能联网

    摘要: 在Virtual Box下选择了Bridge Adaptor模式,安装CENTOS 7,网络连接一直都没有问题,后来不知道什么缘故就突然不能联网,很是烦恼,查询了很多网络方面的配置信息,也做了 ...

  5. 成功部署SSIS中含有Oracle数据库连接的ETL包

    RT,正式写之前,我想说,真TMD不容易!!! 写博客,责任心,很重要 在百度搜出来的内地博客技术文章(CSDN.ITEYE.CNBLOGS……),大部分都是不全面,只针对一个遇到的问题点的记录,可以 ...

  6. 71. Merge k Sorted Lists

    Merge k Sorted Lists Merge k sorted linked lists and return it as one sorted list. Analyze and descr ...

  7. VMware Workstation 11， 客户机Ubuntu14.04.1 LTS 64bit，宿主机Windows 8.1 64bit，剪贴板共享(copy and paste)失效问题

    Ubuntu14.04是从12.04升级上来的,因为GUI性能的原因相继装了Xubunbu和Lubuntu的包(Lubuntu的桌面果然轻量级,但是请神容易送神难,卸载Xubuntu很麻烦,就先放下了 ...

  8. Hadoop内功修炼

    IT十八掌<大数据内功修炼系列课程>强势推出!由实战派名师徐培成亲自操刀,学完做不了大数据我们负全责!2015.12.21前,优惠价:4999(名额已不多!)2015.12.31前,优惠价 ...

  9. python 2.7 rsa 离线安装 和使用示例

    离线安装方法 http://blog.csdn.net/monsion/article/details/8679847 >>> import rsa >>> (pk ...

  10. extends 和 implements

    extends是继承类与类的 implements是实现接口的 类与类之间只支持单继承 接口与接口之间支持多继承