Swiper slider插件

下载地址：

http://www.lanrenzhijia.com/jquery/2851.html

http://demo.lanrenzhijia.com/js/mobile0626.rar



演示代码：

<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet" href="css/idangerous.swiper.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script src="js/idangerous.swiper-1.9.1.min.js"></script>

<style type="text/css">
.home-device {
	width:640px;
	height:300px;
	margin:0 auto;
	position:relative;
	/*边框影音*/
	box-shadow: 0px 0px 5px #000;
}
.home-device .arrow-left {
	/* 引用时注意图片路劲 */
	background:url(./images/arrows.png) no-repeat left top;
	position:absolute;
	left:10px;
	top:50%;
	margin-top:-15px;
	width:17px;
	height:30px;
	z-index:888;
}
.home-device .arrow-right {
	/* 引用时注意图片路劲 */
	background:url(./images/arrows.png) no-repeat left bottom;
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-15px;
	width:17px;
	height:30px;
	z-index:888;
}
.swiper-main {
	width: 640px;
	height: 300px;
	position: relative;
}

.swiper1, .swiper1 .swiper-slide {
	width: 640px;
	height: 300px;
}
.pagination1 {
	text-align: center;
	margin-top: 5px;
}
.content-slide {
	background: #fff;
	padding: 20px;
	border-radius: 5px;
}
.cs-1, .cs-2 {
	float: left;
	width:270px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.cs-1 {
	margin-right: 20px;
	background: #333;
	color: #fff;
}
.cs-2 {
	background: #ad2e4c;
	color: #fff;
}
/* Pagination */
.pagination1 .swiper-pagination-switch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #999;
	box-shadow: 0px 1px 2px #555 inset;
	margin: 0 3px;
	cursor: pointer;
}
.pagination1 .swiper-active-switch {
	background: #fff;
}
.sw-title {
	padding: 5px 20px;
	font-size: 41px;
	margin: 50px 0 20px;
	font-family: 'Lato', sans-serif;
	line-height: 50px;
	color: #222;
	font-weight: 300;
	border-bottom: 1px solid #555;
}
.sw-content {
	background: #fff;
	border-radius: 5px;
}
.demo-title {
	margin-bottom: 5px;
	text-align: center;
	font-size: 31px;
	font-family: "Lato", Arial, Helvetica;
	font-weight: 300;
	line-height: 35px;
	margin: 50px 0 20px;
}
</style>
</head>
<body>



<div class="home-device">
	<a class="arrow-left" href="#"></a>
	<a class="arrow-right" href="#"></a>
	<div class="swiper-main">
		<div class="swiper-container swiper1">
			<div class="swiper-wrapper">
				<div class="swiper-slide"> <img src="images/slider1-1.png"> </div>
				<div class="swiper-slide"> <img src="images/slider1-2.png"><h2>这是标题。。</h2></div>
				<div class="swiper-slide">
					<div class="content-slide">
						<h2 style="margin-top: 0;">雅蠛蝶</h2>
						<p>自定义内容幻灯片，呵呵</p>
					</div>
					<div class="content-slide cs-1">
						<p style="margin: 0;">无语.</p>
					</div>
					<div class="content-slide cs-2">
						<p style="margin: 0;">操.</p>
					</div>
					<div class="content-slide cs-1">
						<p style="margin: 0;">fuck.</p>
					</div>
					<div class="content-slide cs-2">
						<p style="margin: 0;">shit.</p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="pagination pagination1"></div>
</div>
	
	
<script>
$(function(){
	//Main Swiper
	var swiper = new Swiper('.swiper1', {
		pagination : '.pagination1',
		loop:true,
		grabCursor: true
	});
	//Navigation arrows
	$('.arrow-left').click(function(e) {
        e.preventDefault()
		swiper.swipePrev()
    });
	$('.arrow-right').click(function(e) {
        e.preventDefault()
		swiper.swipeNext()
    });
    //Clickable pagination
    $('.pagination1 .swiper-pagination-switch').click(function(){
    	swiper.swipeTo($(this).index())
    })
})
</script>
</body>
</html>




演示地址：

http://www.jiawin.com/demo/6589.html



关于触屏事件参考资料：

http://www.cnblogs.com/iamlilinfeng/p/3983671.html