jQuery触摸友好滑块插件Glide

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery触摸友好滑块插件Glide 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery触摸友好滑块插件Glide</title>
	<!--<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>-->
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/glide.css" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>

	<header class="header">
		<div class="slider">
			<ul class="slides">
				<li class="slide glide"></li>
				<li class="slide simple"></li>
				<li class="slide lightweight"></li>
				<li class="slide fast"></li>
			</ul>
		</div>
		<div class="bar">
			<a target="_blank" href="#" class="button button--white push-left"><span class="entypo-download"></span>&nbsp;内容</a>
			<a target="_blank" href="#jiaoben/" class="button push-right"><span class="entypo-github"></span>&nbsp;内容</a>
		</div>
	</header>
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery.glide.min.js"></script>
	<script>
		var glide = $('.slider').glide({
			arrowRightText: '→',
			arrowLeftText: '←'
		});
	</script>
</body>
</html>

CSS代码(style.css):

@import url(http://weloveiconfonts.com/api/?family=entypo);/* entypo */
[class*="entypo-"]:before{font-family:'entypo',sans-serif;}
.cf:before,.cf:after{content:" ";/* 1 */
 display:table;/* 2 */
}
.cf:after{clear:both;}
.cf{*zoom:1;}
body{width:100%;color:#999;font-family:'Maven Pro',sans-serif;font-size:24px;}
h1{color:#333;font-size:36px;font-weight:bold;margin:0 0 30px 0;}
a{color:#333;text-decoration:none;}
a:hover{color:#000;}
.header{height:620px;background:#ccc url(../images/slider-bg.jpg);}
.bar{max-width:920px;height:44px;margin:0 auto;position:relative;top:56px;padding:20px;background:#6c7d83;color:#fff;z-index:999;}
.button{padding:10px;color:#fff;font-size:20px;text-decoration:none;border:1px solid #fff;-webkit-border-radius:6px;border-radius:6px;background-clip:padding-box;display:block;}
.button:hover{background:#fff;color:#6c7d83;}
.button--white{background:#fff;color:#6c7d83;}
.button--white:hover{background:#6c7d83;color:#fff;}
.push-right{float:right;clear:none;margin-left:15px;}
.push-left{float:left;clear:none;margin-right:15px;}
.slide{background-position:center center;background-repeat:no-repeat;}
.glide{background-image:url(../images/slide-glide.png);}
.simple{background-image:url(../images/slide-simple.png);}
.lightweight{background-image:url(../images/slide-lightweight.png);}
.fast{background-image:url(../images/slide-fast.png);}
.container{max-width:960px;height:100%;margin:0 auto;overflow:hidden;margin-bottom:120px;}
.section{position:relative;max-width:100%;height:360px;padding:90px;background:#fefefe;border-right:1px solid #f3f3f3;border-left:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
.about{background:url(../images/bg-about.jpg) center bottom no-repeat;}
.responsive{background:url(../images/bg-responsive.jpg) left bottom no-repeat;}
.responsive .article{width:250px;}
.css{background:url(../images/bg-css.jpg) right bottom no-repeat;}
.css .article{width:250px;position:absolute;right:90px;top:110px;}
.love{height:240px;}
.list-right{margin-left:20px;float:right;clear:none;}
.list-left{margin-left:20px;float:left;clear:none;}
footer{font:11px Arial;padding-top:30px;}
@media only screen and (min-width:380px) and (max-width:768px){.section{background:none;height:auto;padding:60px;}
.css .article,.responsive .article{position:static;width:100%;}
.list-right{float:left;clear:both;}
.header,.slider{height:320px;}
.slider-arrow--right{bottom:50%;right:20px;}
.slider-arrow--left{bottom:50%;left:20px;}
.glide,.simple,.lightweight,.fast{background-size:75%;}
.bar{position:relative;top:0;}
footer{padding:20px 20px;}
}

附件:下载该文件资源,减少时间成本(增值服务)