移动端图片轮播效果：depth模式总结

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_34293059

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moumou0213/p/6438498.html

版权

最近公司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="image/1.jpg"/>
            <p>无谷三文鱼鸭肉蔬菜配方</p>
        </div>
        <div class="img">
            <img src="image/1.jpg"/>
            <p>无谷三文鱼鸭肉蔬菜配方</p>
        </div>
        <div class="img">
            <img src="image/1.jpg"/>
            <p>无谷三文鱼鸭肉蔬菜配方</p>
        </div>
        <div class="img">
            <img src="image/1.jpg"/>
            <p>无谷三文鱼鸭肉蔬菜配方</p>
        </div>
        <div class="img">
            <img src="image/1.jpg"/>
            <p>无谷三文鱼鸭肉蔬菜配方</p>
        </div>
        <!-- <div class="slide-bt"></div> -->
    </div>
    <!-- <button οnclick="left()">上一页</button>
    <button οnclick="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+"' οnclick='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="images/1.jpg" class="main-img">
            <p>猫粮狗粮</p>
        </div>
        <div class="swiper-slide">
            <img src="images/1.jpg" class="main-img">
            <p>猫粮狗粮</p>
        </div>
        <div class="swiper-slide">
            <img src="images/1.jpg" class="main-img">
            <p>猫粮狗粮</p>
        </div>
        <div class="swiper-slide">
            <img src="images/1.jpg" class="main-img">
            <p>猫粮狗粮</p>
        </div>
        <div class="swiper-slide">
            <img src="images/1.jpg" class="main-img">
            <p>猫粮狗粮</p>
        </div>
        <div class="swiper-slide">
            <img src="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>