swiperå¼å½¢åæ¢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="applicable-device" content="mobile">
<title></title>
<script src="//static.haokecheng.com/js/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript"> pcredirect("");</script>
<script type='application/javascript' src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/m-reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" charset="utf-8">
<link rel="stylesheet" href="css/admin.css" />
<link rel="stylesheet" href="css/swiper-3.4.2.min .css" />
<style>
.content{position:relative;padding-top:20px;width:100%;height:300px;border:1px solid #dedede;}
ul{list-style: none;}
li{display:inline-block;float:left;width:200px;height:300px;}
ul li img{width:100%;}
.more{position:absolute;top:25px;right:-50px;padding:10px 15px;width:50px;height:115px;font-size:15px;color:#323232;background:#dedede;transition: all .5s;border-top-left-radius:100px;border-bottom-left-radius: 100px;}
.more.tran{right:0px;}
.swiper-slide {
-webkit-transition: transform 1.0s;
-moz-transition: transform 1.0s;
-ms-transition: transform 1.0s;
-o-transition: transform 1.0s;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
.swiper-slide-active,.swiper-slide-duplicate-active {
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<div class="content swiper-container">
<ul class="box swiper-wrapper clearfix">
<li class="item swiper-slide"><img src="img/6.jpg" alt="" /></li>
<li class="item swiper-slide"><img src="img/6.jpg" alt="" /></li>
<li class="item swiper-slide"><img src="img/6.jpg" alt="" /></li>
</ul>
<div class="more">æ´å¤</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay:3000,
speed:1000,
autoplayDisableOnInteraction : false,//ç¨æ·æä½swiperä¹åï¼æ¯å¦ç¦æ¢autoplay
loop:true,
centeredSlides : true,
slidesPerView:2,
pagination : '.swiper-pagination',
paginationClickable:true,//ç¹å»å页å¨æ¯å¦ä¼åæ¢
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
onInit:function(swiper){//åè°å½æ°ï¼åå§ååæ§è¡ã
swiper.slides[2].className="swiper-slide swiper-slide-active";//第ä¸æ¬¡æå¼ä¸è¦å¨ç»
},
})
</script>
</body>
</html>
æ¹æ³äºï¼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="applicable-device" content="mobile">
<title></title>
<script src="//static.haokecheng.com/js/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript"> pcredirect("");</script>
<script type='application/javascript' src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/m-reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" charset="utf-8">
<link rel="stylesheet" href="css/admin.css" />
<link rel="stylesheet" href="css/swiper-3.4.2.min .css" />
<style>
.banner {
margin-top: .24rem;
height: 4.08rem;
}
.banner .swiper-slide {
width: 6.8rem;
height: 3.6rem;
}
.banner .swiper-slide img {
width: 100%;
}
.banner.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: .24rem;
}
.banner.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 .06rem;
}
.banner .swiper-pagination-bullet {
width: 6px;
height: 6px;
opacity: 1;
background: #888888;
}
.banner .swiper-pagination-bullet-active {
background: #C71045;
}
</style>
</head>
<body>
<div class="swiper-container banner">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="/mspecial/2018_ielts_12h_m/"><img src="http://m.eickaopei.com/uploads/banner/20181206/2003da65e0dca85594bb18b217e66d92.jpg" alt="12å°æ¶é
æç¹è®ç" /></a></div>
<div class="swiper-slide"><a href="/mspecial/2018_ielts_12h_m/"><img src="http://m.eickaopei.com/uploads/banner/20181217/3eae375bad00937a12d8b444550ad3e0.jpg" alt="å人ä¸å 课" /></a></div>
<div class="swiper-slide"><a href="/mspecial/ielts_jjfwj/"><img src="http://m.eickaopei.com/uploads/banner/20180802/208cc3301b8810df6ed42a79144c7dc9.jpg" alt="é
ææºç»ä¸è½½" /></a></div>
<div class="swiper-slide"><a href="/mspecial/2018_toefl_12h_m/"><img src="http://m.eickaopei.com/uploads/banner/20181206/6715342ed2fbda87d801ef889239cd55.jpg" alt="12å°æ¶æç¦ç¹è®ç" /></a></div>
<div class="swiper-slide"><a href="/mspecial/2018_hjb_m/"><img src="http://m.eickaopei.com/uploads/banner/20181130/a675e642c572966e0c727a461893fc95.jpg" alt="2019å¯åç" /></a></div>
<div class="swiper-slide"><a href="/mspecial/2018_tset_2min_m/"><img src="http://m.eickaopei.com/uploads/banner/20180706/d81f1b7776b08bc35197d1c8d82884b1.jpg" alt="2åéå¿«éæµé
æ&æç¦æ°´å¹³" /></a></div>
<div class="swiper-slide"><a href="/mspecial/2018_toefl_m/"><img src="http://m.eickaopei.com/uploads/banner/20180914/ee17c05a86883f4fdc36487f873029b6.jpg" alt="æç¦å¹è®" /></a></div>
<div class="swiper-slide"><a href="/mspecial/2018_prepsmith_m/"><img src="http://m.eickaopei.com/uploads/banner/20181112/e4eedc2fa4d2101bb12426bbbe8c71f1.jpg" alt="å¤èå²å¯æ¯" /></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
//banner è½®æ
var size = $(window).innerWidth() / 7.5,
// depthNum = 1.15 * size,
stretchNum = .5 * size;
var banner = new Swiper ('.banner', {
loop: true,
pagination: '.swiper-pagination',
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflow: {
rotate: 0, //slideå3dæ转æ¶Yè½´çæ转è§åº¦ãé»è®¤50ã
stretch: -stretchNum,//æ¯ä¸ªslideä¹é´çæ伸å¼ï¼è¶å¤§slideé å¾è¶ç´§ã é»è®¤0ã
depth: 115, //slideçä½ç½®æ·±åº¦ãå¼è¶å¤§zè½´è·ç¦»è¶è¿ï¼çèµ·æ¥è¶å°ã é»è®¤100ã
slideShadows: false //å¼å¯slideé´å½±ãé»è®¤ trueã
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/admin.css" />
<link rel="stylesheet" href="css/swiper-3.4.2.min .css" />
<style>
.content{position:relative;padding-top:20px;width:700px;height:300px;border:1px solid #dedede;}
ul{list-style: none;}
.item{display:inline-block;float:left;width:300px;height:300px;margin-right:20px;}
.item img{width:300px;}
.more{position:absolute;top:25px;right:-50px;padding:10px 15px;width:50px;height:115px;font-size:15px;color:#323232;background:#dedede;transition: all .5s;border-top-left-radius:100px;border-bottom-left-radius: 100px;}
.more.tran{right:0px;}
</style>
</head>
<body>
<div class="content swiper-container">
<ul class="box swiper-wrapper clearfix">
<li class="item swiper-slide"><img src="img/1.jpg" alt="" /></li>
<li class="item swiper-slide"><img src="img/1.jpg" alt="" /></li>
<li class="item swiper-slide"><img src="img/1.jpg" alt="" /></li>
</ul>
<div class="more">æ´å¤</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
//autoplay:1000,
freeMode: true,
freeModeMomentumRatio: 0.5,
slidesPerView: 'auto',
onSliderMove:function(swiper){
var num=-50;
TR=swiper.translate;
len=-264-TR;
if(TR<-264){
if(num+len>0){
$(".more").css("right",0);
}else{
$(".more").css("right",(num+len));
}
if(TR<-350){
$(".more").text("éæ¾æ´å¤");
}else{
$(".more").text("æ´å¤");
}
}
},
onTouchEnd: function(swiper){
TR=swiper.translate
if(TR<-350){
//swiper.setWrapperTranslate(TR);
location.href ="http://www.baidu.com";
};
$(".more").css("right",-50);
}
})
</script>
</body>
</html>