<!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. web api 开发记录

    1. 修改 api 返回时间格式 //配置返回的时间类型数据格式 GlobalConfiguration.Configuration.Formatters.JsonFormatter.Serializ ...

  2. lucene 内存索引 和文件索引 合并

    IndexWriter.addIndexes(ramDirectory); http://blog.csdn.net/qq_28042463/article/details/51538283 在luc ...

  3. Map接口

    Map实现的包括HashMap 和TreeMap .建议使用HashMap ,效率更高.并且允许使用null值,单是必须保证键的唯一性,TreeMap不允许有空.在添加删除和定位映射关系的时候不如Ha ...

  4. Windows消息过滤

    在C#编程中,经常会遇到一些场景,如禁止鼠标拖动窗体,启用某些快捷键,禁止鼠标移动等.遇到这些需求,可以通过窗体的MouseMove事件,OnDragDrop,OnMove等事件来解决问题, 但是该方 ...

  5. 一次性插入多条sql语句的几种方法

    第一种:通过 insert select语句向表中添加数据 从现有表里面把数据插入到另外一张新表去前提必须先有test_2表的存在,并且test_2表中的列的数据类型必须和test表里面列的数据类型一 ...

  6. Unreal Engine 4 一些小技巧或提示

    怎样获取当前地图的名字 在任意Actor类里,GetWorld()->GetName()就可以获得当前地图的名字

  7. Jmeter组件7. JDBC Connection Configuration & JDBC Request

    Jmeter同样可以测试数据库的性能,通过执行增删改查的语句,以下举的是oracle的例子 Step 1: 下载ojdbc14.jar包放到Jmeter lib包中,在test plan中配置,并且重 ...

  8. This kind of launch is configured to open the Debug perspective when it suspends.

    This kind of launch is configured to open the Debug perspective when it suspends. 因为设置了断点才会弹出这个,不需要调 ...

  9. 在CentOS或RHEL防火墙上开启端口

    转载自:https://linux.cn/article-4243-1.html 如果希望在服务器上提供服务,诸如CentOS或RHEL的企业级Linux发行版包含内置的强大防火墙,它们默认的防火墙规 ...

  10. js 页面刷新方法

    1.reload方法,该方法强迫浏览器刷新当前页面语法:location.reload([bForceGet])参数:bForceGet,可选参数,默认为false从客户端缓存里取当前页.true,则 ...