targetkiller · April 12, 2016 02:33
diff --git a/mobile-carousel.html b/mobile-carousel.html
 <html>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<meta charset="utf-8" />
 	<title>横屏提示</title>
 	<style type="text/css">
 		.mod-carousel{
 		  position: relative;
 		  width: 100%;
 		}
 		.carousel-list{
 			list-style: none;
 		}
 		.carousel-item{
 		  width: 173px;
 		  height: 280px;
 		  position: absolute;
 		  top: -24px;
 		  left: 50%;
 		  margin-left: -87px;
 		  background-color: #ffffff;
 		  box-shadow: 0 1px 5px #555;
 		  border: 4px solid #fff;
 		  z-index: 3;
 		  -webkit-box-sizing:border-box;
 		  -ms-box-sizing:border-box;
 		  box-sizing:border-box;
 		  -webkit-transition:all .2s ease-in-out;
 		  -ms-transition:all .2s ease-in-out;
 		  transition:all .2s ease-in-out;
 		}
 		.carousel-item.photo-prev{
 		  -webkit-transform-origin:0 50%;
 		  transform-origin:0 50%;
 		  -webkit-transform: translate3d(-45%,0,0) scale(0.8);
 		  transform: translate3d(-45%,0,0) scale(0.8);
 		  z-index: 2;
 		}
 		.carousel-item.photo-next{
 		  -webkit-transform-origin:100% 50%;
 		  transform-origin:100% 50%;
 		  -webkit-transform: translate3d(45%,0,0) scale(0.8);
 		  transform: translate3d(45%,0,0) scale(0.8);
 		  z-index: 2;
 		}
 		.carousel-item.photo-behide{
 		  -webkit-transform-origin:0 0;
 		  transform-origin:0 0;
 		  -webkit-transform: translate3d(0,0,0) scale(0.4);
 		  transform: translate3d(0,0,0) scale(0.4);
 		  z-index: 1;
 		}
 		.carousel-btn-prev,
 		.carousel-btn-next{
 		  width: 47px;
 		  height: 47px;
 		  position: absolute;
 		  top: 92px;
 		  text-indent: -9999px;
 		  border: none;
 		  background-color: transparent;
 		  outline: none;
 		  z-index: 4;
 		}
 		.carousel-btn-prev{
 			left: 5px;
 			background-size: 47px 47px;
 			background-image: url(http://qzonestyle.gtimg.cn/aoi/sola/20160331104416_evLL19OhzQ.png);
 		}
 		.carousel-btn-next{
 			right: 5px;
 			background-size: 47px 47px;
  			background-image: url(http://qzonestyle.gtimg.cn/aoi/sola/20160331104416_5yA6nqUjWE.png);
 		}
 	</style>
 </head>
 <body>
 	<div class="mod-carousel">
        <ul class="carousel-list">
            <!-- 第一次拉取四个用户信息，左右翻动再动态拉取新一个 -->
            <li class="carousel-item photo-now"></li>
            <li class="carousel-item photo-prev"></li>
            <li class="carousel-item photo-next"></li>
            <li class="carousel-item photo-behide"></li>
        </ul>
        <button class="carousel-btn-prev" role="button" title="上一个">上一个</button>
        <button class="carousel-btn-next" role="button" title="下一个">下一个</button>
    </div>

    <script src="http://qzonestyle.gtimg.cn/ac/lib/jquery/1.10.2/jquery.js"></script>
 	<script type="text/javascript">
 		$('.carousel-btn-prev').click(function(e){
            var $prev = $('.photo-prev');
            var $now = $('.photo-now');
            var $next = $('.photo-next');
            var $behide = $('.photo-behide');
            $prev.attr('class','carousel-item photo-behide');
            $now.attr('class','carousel-item photo-prev');
            $next.attr('class','carousel-item photo-now');
            $behide.attr('class','carousel-item photo-next');

            // 前台todo:
            // 更新一次后把behide里的图片替换新内容
        });
        $('.carousel-btn-next').click(function(e){
            var $prev = $('.photo-prev');
            var $now = $('.photo-now');
            var $next = $('.photo-next');
            var $behide = $('.photo-behide');
            $prev.attr('class','carousel-item photo-now');
            $now.attr('class','carousel-item photo-next');
            $next.attr('class','carousel-item photo-behide');
            $behide.attr('class','carousel-item photo-prev');

            // 前台todo:
            // 更新一次后把behide里的图片替换芯内容
        });
 	</script>
 </body>
 </html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8" />
	<title>横屏提示</title>
	<style type="text/css">
	.mod-carousel{
	position: relative;
	width: 100%;
	}
	.carousel-list{
	list-style: none;
	}
	.carousel-item{
	width: 173px;
	height: 280px;
	position: absolute;
	top: -24px;
	left: 50%;
	margin-left: -87px;
	background-color: #ffffff;
	box-shadow: 0 1px 5px #555;
	border: 4px solid #fff;
	z-index: 3;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition:all .2s ease-in-out;
	-ms-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	}
	.carousel-item.photo-prev{
	-webkit-transform-origin:0 50%;
	transform-origin:0 50%;
	-webkit-transform: translate3d(-45%,0,0) scale(0.8);
	transform: translate3d(-45%,0,0) scale(0.8);
	z-index: 2;
	}
	.carousel-item.photo-next{
	-webkit-transform-origin:100% 50%;
	transform-origin:100% 50%;
	-webkit-transform: translate3d(45%,0,0) scale(0.8);
	transform: translate3d(45%,0,0) scale(0.8);
	z-index: 2;
	}
	.carousel-item.photo-behide{
	-webkit-transform-origin:0 0;
	transform-origin:0 0;
	-webkit-transform: translate3d(0,0,0) scale(0.4);
	transform: translate3d(0,0,0) scale(0.4);
	z-index: 1;
	}
	.carousel-btn-prev,
	.carousel-btn-next{
	width: 47px;
	height: 47px;
	position: absolute;
	top: 92px;
	text-indent: -9999px;
	border: none;
	background-color: transparent;
	outline: none;
	z-index: 4;
	}
	.carousel-btn-prev{
	left: 5px;
	background-size: 47px 47px;
	background-image: url(http://qzonestyle.gtimg.cn/aoi/sola/20160331104416_evLL19OhzQ.png);
	}
	.carousel-btn-next{
	right: 5px;
	background-size: 47px 47px;
	background-image: url(http://qzonestyle.gtimg.cn/aoi/sola/20160331104416_5yA6nqUjWE.png);
	}
	</style>
	</head>
	<body>
	<div class="mod-carousel">
	<ul class="carousel-list">
	<!-- 第一次拉取四个用户信息，左右翻动再动态拉取新一个 -->
	<li class="carousel-item photo-now"></li>
	<li class="carousel-item photo-prev"></li>
	<li class="carousel-item photo-next"></li>
	<li class="carousel-item photo-behide"></li>
	</ul>
	<button class="carousel-btn-prev" role="button" title="上一个">上一个</button>
	<button class="carousel-btn-next" role="button" title="下一个">下一个</button>
	</div>

	<script src="http://qzonestyle.gtimg.cn/ac/lib/jquery/1.10.2/jquery.js"></script>
	<script type="text/javascript">
	$('.carousel-btn-prev').click(function(e){
	var $prev = $('.photo-prev');
	var $now = $('.photo-now');
	var $next = $('.photo-next');
	var $behide = $('.photo-behide');
	$prev.attr('class','carousel-item photo-behide');
	$now.attr('class','carousel-item photo-prev');
	$next.attr('class','carousel-item photo-now');
	$behide.attr('class','carousel-item photo-next');

	// 前台todo:
	// 更新一次后把behide里的图片替换新内容
	});
	$('.carousel-btn-next').click(function(e){
	var $prev = $('.photo-prev');
	var $now = $('.photo-now');
	var $next = $('.photo-next');
	var $behide = $('.photo-behide');
	$prev.attr('class','carousel-item photo-now');
	$now.attr('class','carousel-item photo-next');
	$next.attr('class','carousel-item photo-behide');
	$behide.attr('class','carousel-item photo-prev');

	// 前台todo:
	// 更新一次后把behide里的图片替换芯内容
	});
	</script>
	</body>
	</html>