登陆 注册

QQ登录QQ登陆

Swiper中文论坛»首页 › 交流 › Swiper3 交流 › Swiper使用效果loop=true 时，第1个页面在手机没效果， ...
返回列表 发新帖
查看: 3839|回复: 6
打印 上一主题 下一主题

Swiper使用效果loop=true 时，第1个页面在手机没效果，求解决！

[复制链接]
Jiang

该用户从未签到

3

主题

12

帖子

39

积分

新手上路

Rank: 1

积分
39
QQ
跳转到指定楼层
楼主
发表于 2015-6-5 17:50:10 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="swiper/swiper.min.css">
    <link rel="stylesheet" href="swiper/animate.min.css">
    <!-- Demo styles -->
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 第一页 -->
        <div class="swiper-slide">
            <img src="images/1-1.png" class="ani s1-1" swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s"
                 swiper-animate-delay=".3s">
            <img src="images/1-2.png" class="ani s1-1" swiper-animate-effect="zoomInUp"
                 swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            <img src="images/1-3.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
                 swiper-animate-duration="1s" swiper-animate-delay="2.3s">
            <img src="images/1-4.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
                 swiper-animate-duration="1s" swiper-animate-delay="3.3s">
            <img src="images/1-5.png" class="ani s1-1 infinite" swiper-animate-effect="flipInX"
                 swiper-animate-duration="1.5s"
                 swiper-animate-delay="4.3s">
            <img src="images/1-6.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
                 swiper-animate-delay="5.3s">
        </div>
        <!--第二页-->
        <div class="swiper-slide">
            <img src="images/2-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
                 swiper-animate-duration="1.5s"
                 swiper-animate-delay=".3s">
            <img src="images/2-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            <img src="images/2-3.png" class="ani s1-1" swiper-animate-effect="bounceInRight"
                 swiper-animate-duration="1s" swiper-animate-delay="2.3s">
            <img src="images/2-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="3.3s">
            <img src="images/2-5.png" class="ani s1-1" swiper-animate-effect="bounceInRight"
                 swiper-animate-duration="1s"
                 swiper-animate-delay="4.3s">
            <img src="images/2-6.png" class="ani s1-1" swiper-animate-effect="flipInY" swiper-animate-duration="1s"
                 swiper-animate-delay="5.3s">
        </div>
        <!--第三页-->
        <div class="swiper-slide">
            <img src="images/3-1.png" class="ani s1-1 infinite" swiper-animate-effect="bounce"
                 swiper-animate-duration="1s"
                 swiper-animate-delay=".3s">
            <img src="images/3-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            <img src="images/3-3.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
                 swiper-animate-duration="1s" swiper-animate-delay="2.3s">
            <img src="images/3-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="3.3s">
            <img src="images/3-5.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
                 swiper-animate-delay="4.3s">
            <img src="images/3-6.png" class="ani s1-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                 swiper-animate-delay="5.3s">
        </div>
        <!--第四页-->
        <div class="swiper-slide">
            <img src="images/4-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
                 swiper-animate-duration="1.5s"
                 swiper-animate-delay=".3s">
            <img src="images/4-2.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            <img src="images/4-3.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
                 swiper-animate-duration="1s" swiper-animate-delay="2.3s">
            <img src="images/4-4.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="3.3s">
            <img src="images/4-5.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
                 swiper-animate-delay="4.3s">
            <img src="images/4-6.png" class="ani s1-1" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s"
                 swiper-animate-delay="5.3s">
            <img src="images/4-7.png" class="ani s1-1" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s"
                 swiper-animate-delay="6.3s">
        </div>
        <!--第五页-->
        <div class="swiper-slide">
            <img src="images/5-1.png" class="ani s1-1 infinite" swiper-animate-effect="rubberBand"
                 swiper-animate-duration="1.5s"
                 swiper-animate-delay=".3s">
            <img src="images/5-2.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
                 swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            <img src="images/5-3.png" class="ani s1-1" swiper-animate-effect="bounceInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="2.3s">
            <img src="images/5-4.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn"
                 swiper-animate-duration="1s" swiper-animate-delay="3.3s">
            <img src="images/5-5.png" class="ani s1-1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s"
                 swiper-animate-delay="4.3s">
            <img src="images/5-6.png" class="ani s1-1" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s"
                 swiper-animate-delay="5.3s">
            <img src="images/5-7.png" class="ani s1-1" swiper-animate-effect="flipInY" swiper-animate-duration="1s"
                 swiper-animate-delay="6.3s">
        </div>
        <!--第六页-->
        <div class="swiper-slide">
            <img src="images/6-1.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
                 swiper-animate-delay=".3s">
            <img src="images/6-2.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
                 swiper-animate-duration="1s" swiper-animate-delay="1.3s">
            <img src="images/6-3.png" class="ani s1-1" swiper-animate-effect="zoomInLeft"
                 swiper-animate-duration="1s" swiper-animate-delay="2.3s">
            <img src="images/6-4.png" class="ani s1-1" swiper-animate-effect="zoomInRight"
                 swiper-animate-duration="1s" swiper-animate-delay="3.3s">
            <img src="images/6-5.png" class="ani s1-1" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s"
                 swiper-animate-delay="4.3s">
        </div>


    </div>
    <img src="images/shou.png" class="shou" alt="">
</div>

</body>
<!-- Swiper JS -->
<script type="text/javascript" src="swiper/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript" src="swiper/swiper.jquery.min.js"></script>
<script type="text/javascript" src="swiper/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script type="text/javascript">

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper);
            swiperAnimate(swiper);
        },
        onSlideChangeEnd: function (swiper) {
            swiperAnimate(swiper);
            var a = swiper.activeIndex+1;
            //alert(a)
            if (a >= swiper.slides.length) {
                $('.shou').hide();
            } else {
                $('.shou').show();
            }
        }
    });
</script>
</html>
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

xudong
  • TA的每日心情
    慵懒
    4 天前

    • 签到天数: 341 天

    [LV.8]以坛为家I

    17

    主题

    399

    帖子

    3809

    积分

    论坛元老

    Rank: 8Rank: 8

    积分
    3809
    QQ
    7#
    发表于 2016-8-19 10:11:19 | 只看该作者
    你用的这个animate插件是不支持loop:true;的
    回复 支持 反对

    使用道具 举报

    忆影

    该用户从未签到

    0

    主题

    22

    帖子

    22

    积分

    新手上路

    Rank: 1

    积分
    22
    6#
    发表于 2016-1-6 11:40:26 | 只看该作者
    第一页 加上class   .swiper-slide-active
    回复 支持 反对

    使用道具 举报

    roger
  • TA的每日心情
    怒
    2017-2-28 11:38

    • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    8

    帖子

    25

    积分

    新手上路

    Rank: 1

    积分
    25
    5#
    发表于 2016-1-4 22:40:55 | 只看该作者
    .........
    回复

    使用道具 举报

    wxwking

    该用户从未签到

    1

    主题

    4

    帖子

    21

    积分

    新手上路

    Rank: 1

    积分
    21
    地板
    发表于 2015-6-26 16:09:56 | 只看该作者
    同问，这个问题困扰好久了，看来是animate不给力。
    回复 支持 反对

    使用道具 举报

    null

    该用户从未签到

    0

    主题

    3

    帖子

    20

    积分

    新手上路

    Rank: 1

    积分
    20
    板凳
    发表于 2015-6-26 10:58:06 | 只看该作者
    loop就要设置为false，需要循环播，但是在滑动几屏后slide中的a标签的点击事件会很难触发，需多次点击
    回复 支持 反对

    使用道具 举报

    chen1110103
  • TA的每日心情
    衰
    2017-12-27 10:36

    • 签到天数: 2 天

    [LV.1]初来乍到

    1万

    主题

    1万

    帖子

    7万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    76581
    沙发
    发表于 2015-6-7 22:49:12 | 只看该作者
    要把loop设置为false
    回复 支持 反对

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号 ) 

    GMT+8, 2024-11-24 13:47 , Processed in 0.101544 second(s), 28 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表