最近公司app改版首页增加了一处轮播图效果，但是跟普通的轮播效果不同，是类似于下图的样式，找了一些兼容移动端的插件以及jQuery源码，总结一下使用心得：
1：jquery源码：缺点是在手机端的滑动很不流畅，影响体验
2：islider插件，也算是移动端比较常用的插件了，使用起来也是很流畅的，缺点是，对于这种放在首页左右滑动的轮播，当滑到此轮播位置的时候页面不能上下滑动，也就是说，islider插件会吃掉页面本身的滚动吧
3：我最常用的swiper插件，一开始没有查找swiper能实现这个效果，直接看案列http://www.swiper.com.cn/demo/choumei/，但是好像不能循环滑动，或者是我没有找到方法，欢迎解决问题的小伙伴给我留言...嘻嘻嘻
下面直接上代码：
1：jQuery源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>首页</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
body{background-color: #262626}
*{
padding: 0;
margin: 0;
}
.container{
max-width: 800px;
margin: 0 auto;
}
.slide{
width: 100%;
min-height: 324px;
overflow: hidden;
position: relative;
-webkit-overflow-scrolling:touch;
}
.slide .img{
overflow: hidden;
position: absolute;
transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
background: #fff;
}
.slide .img img{
width: calc(100% - 14px);
height: calc(100% - 14px);
width: 100% !important;
}
.slide .img1{
width: 40%;
top: 30%;
left: -75%;
z-index: 1;
}
.slide .img2{
width: 60%;
top: 20%;
left: -45%;
z-index: 2;
}
.slide .img3{
width: 68%;
top: 14%;
left: 16%;
z-index: 3;
}
.slide .img4{
width: 60%;
top: 20%;
left: 85%;
z-index: 2;
}
.slide .img5{
width: 40%;
top: 30%;
left: 135%;
z-index: 1;
}
.slide .img p{
color: #333;
background: #fff;
text-align: center; }
</style>
</head>
<body>
<div class="container">
<div id="slide" class="slide">
<!-- 轮播图片数量可自行增减 -->
<div class="img">
<img src="data:image/1.jpg"/>
<p>无谷三文鱼鸭肉蔬菜配方</p>
</div>
<div class="img">
<img src="data:image/1.jpg"/>
<p>无谷三文鱼鸭肉蔬菜配方</p>
</div>
<div class="img">
<img src="data:image/1.jpg"/>
<p>无谷三文鱼鸭肉蔬菜配方</p>
</div>
<div class="img">
<img src="data:image/1.jpg"/>
<p>无谷三文鱼鸭肉蔬菜配方</p>
</div>
<div class="img">
<img src="data:image/1.jpg"/>
<p>无谷三文鱼鸭肉蔬菜配方</p>
</div>
<!-- <div class="slide-bt"></div> -->
</div>
<!-- <button onclick="left()">上一页</button>
<button onclick="right()">下一页</button> -->
</div>
<script>
var autoLb = false; //autoLb=true为开启自动轮播
var autoLbtime = 1; //autoLbtime为轮播间隔时间（单位秒）
var touch = true; //touch=true为开启触摸滑动
var slideBt = true; //slideBt=true为开启滚动按钮
var slideNub; //轮播图片数量 //窗口大小改变时改变轮播图宽高
$(window).resize(function(){
$(".slide").height($(".slide").width()*0.56);
}); $(function(){
$(".slide").height($(".slide").width()*0.56);
slideNub = $(".slide .img").size(); //获取轮播图片数量
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
} //根据轮播图片数量设定图片位置对应的class
if(slideNub==1){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img3");
}
}
if(slideNub==2){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+3));
}
}
if(slideNub==3){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+2));
}
}
if(slideNub>3&&slideNub<6){
for(i=0;i<slideNub;i++){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}
}
if(slideNub>=6){
for(i=0;i<slideNub;i++){
if(i<5){
$(".slide .img:eq("+i+")").addClass("img"+(i+1));
}else{
$(".slide .img:eq("+i+")").addClass("img5");
}
}
} //根据轮播图片数量设定轮播图按钮数量
// if(slideBt){
// for(i=1;i<=slideNub;i++){
// $(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>");
// }
// $(".slide-bt").width(slideNub*34);
// $(".slide-bt").css("margin-left","-"+slideNub*17+"px");
// } //自动轮播
if(autoLb){
setInterval(function(){
right();
}, autoLbtime*1000);
} if(touch){
k_touch();
}
slideLi();
imgClickFy();
}) //右滑动
function right(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==0){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]);
}
}
imgClickFy();
slideLi();
} //左滑动
function left(){
var fy = new Array();
for(i=0;i<slideNub;i++){
fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
}
for(i=0;i<slideNub;i++){
if(i==(slideNub-1)){
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
}else{
$(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]);
}
}
imgClickFy();
slideLi();
} //轮播图片左右图片点击翻页
function imgClickFy(){
$(".slide .img").removeAttr("onclick");
$(".slide .img2").attr("onclick","left()");
$(".slide .img4").attr("onclick","right()");
} //修改当前最中间图片对应按钮选中状态
function slideLi(){
var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
$(".slide-bt span").removeClass("on");
$(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
} //轮播按钮点击翻页
function tz(id){
var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
if(tzcs>0){
for(i=0;i<tzcs;i++){
setTimeout(function(){
right();
},1);
}
}
if(tzcs<0){
tzcs=(-tzcs);
for(i=0;i<tzcs;i++){
setTimeout(function(){
left();
},1);
}
}
slideLi();
} //触摸滑动模块
function k_touch() {
var _start = 0, _end = 0, _content = document.getElementById("slide");
_content.addEventListener("touchstart", touchStart, false);
_content.addEventListener("touchmove", touchMove, false);
_content.addEventListener("touchend", touchEnd, false);
function touchStart(event) {
var touch = event.targetTouches[0];
_start = touch.pageX;
}
function touchMove(event) {
var touch = event.targetTouches[0];
_end = (_start - touch.pageX);
} function touchEnd(event) {
if (_end < -100) {
left();
_end=0;
}else if(_end > 100){
right();
_end=0;
}
}
}
</script>
</body>
</html>
2：islider方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>Animation</title>
<style>
body {
margin: 0;
padding: 0;
background: #333;
}
p{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
/*ul wrapper*/
#iSlider-wrapper {
height: 100%;/* 设置高度 */
width: 100%;
overflow: hidden;
position: absolute;
}
#iSlider-wrapper ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#iSlider-wrapper li {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
list-style: none;
}
#iSlider-wrapper li img {
max-width: 100%;
max-height: 100%;
}
#iSlider-wrapper .goods_item img{
width: 100%;
height: 100%;
display: block;
}
#iSlider-wrapper p{
background: #fff;
color: #333;
text-align: center;
line-height: 2.0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
</style>
</head>
<body>
<div id="iSlider-wrapper"></div> <script type="text/javascript" src="./public/js/iSlider.js"></script>
<script type="text/javascript" src="./public/js/iSlider.animate.min.js"></script>
<script>
var list = [
{
'content': '<div class="goods_item"><img src="imgs/1.jpg"><p>设置图片</p></div>'
},
{
'content': '<div class="goods_item"><img src="imgs/1.jpg"><p>设置图片</p></div>'
},
{
'content': '<div class="goods_item"><img src="imgs/1.jpg"><p>设置图片</p></div>'
},
{
'content': '<div class="goods_item"><img src="imgs/1.jpg"><p>设置图片</p></div>'
}
]; var S = new iSlider(document.getElementById('iSlider-wrapper'), list, {
isLooping: 1,
isOverspread: 1,
isAutoplay: 0,
animateTime: 800,
animateType: 'flow'
});
</script>
</body>
</html>
3：swiper方法
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="swiper.css">
<title>Swiper3.0.4</title>
<style>
.swiper-container {
width:100%;
-webkit-perspective:1200px;
-moz-perspective:1200px;
-ms-perspective:1200px;
perspective:1200px
}
.swiper-wrapper {
margin-top:10px
}
.swiper-slide {
width:80%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d
}
.swiper-slide .main-img {
width:80%;
margin:0 auto;
display:block
}
.swiper-slide p {
text-align: center;
width:80%;
margin:0 auto;
background: #fff;
color: #333;
line-height: 2.0
}
</style>
</head>
<body style="background:#ccc;">
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="data:images/1.jpg" class="main-img">
<p>猫粮狗粮</p>
</div>
<div class="swiper-slide">
<img src="data:images/1.jpg" class="main-img">
<p>猫粮狗粮</p>
</div>
<div class="swiper-slide">
<img src="data:images/1.jpg" class="main-img">
<p>猫粮狗粮</p>
</div>
<div class="swiper-slide">
<img src="data:images/1.jpg" class="main-img">
<p>猫粮狗粮</p>
</div>
<div class="swiper-slide">
<img src="data:images/1.jpg" class="main-img">
<p>猫粮狗粮</p>
</div>
<div class="swiper-slide">
<img src="data:images/1.jpg" class="main-img">
<p>猫粮狗粮</p>
</div>
</div>
</div>
<script src="swiper.min.js"></script>
<script>
var mySwiper = new Swiper(".swiper-container", {
slidesPerView: "auto",
loop : true,
loopedSlides :3,//这两句可以让滑动循环
centeredSlides: !0,
watchSlidesProgress: !0,
onProgress: function(a) {
var b, c, d;
for (b = 0; b < a.slides.length; b++) c = a.slides[b],
d = c.progress,
scale = 1 - Math.min(Math.abs(.2 * d), 1),
es = c.style,
es.opacity = 1 - Math.min(Math.abs(d / 2), 1),//opacity控制左右图片的透明度
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0," + -Math.abs(150 * d) + "px)"//150d控制左右图片的距离
},
onSetTransition: function(a, b) {
for (var c = 0; c < a.slides.length; c++) es = a.slides[c].style,
es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = b + "ms"
}
});
</script>
</body>
</html>