查看: 2110|回复: 0
打印 上一主题 下一主题

如何回到初始状态,进行swiper-slide的增减

[复制链接]

该用户从未签到

2

主题

6

帖子

58

积分

注册会员

Rank: 2

积分
58
跳转到指定楼层
楼主
发表于 2016-4-21 08:55:58 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
,,大家帮忙看看,谢谢啦<select  id="s1">
    <option>请选择</option>
    <option>2</option>
    <option>4</option>
    <option>5</option>
</select>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide d1">slider1</div>
        <div class="swiper-slide d2">slider2</div>
        <div class="swiper-slide d3">slider3</div>
    </div><script>
    var mySwiper = new Swiper('.swiper-container', {
        autoplay:5000,//也可以设置false 禁止轮播

        //direction : 'vertical',// 默认为左右,vertical为上下
        // speed:800  速度
        loop:true//此设置 轮播到第五张图时自动切换到第一张图
    });
    // setInterval(mySwiper(),500);
    //定义方法
    //change()时调用方法
    function chu(){
        var mySwiper = new Swiper('.swiper-container', {
            autoplay:false,//也可以设置false 禁止轮播

            //direction : 'vertical',// 默认为左右,vertical为上下
            // speed:800  速度
            loop:true//此设置 轮播到第五张图时自动切换到第一张图
        });
    }
    function pin(){
        var $s1=$("#s1").val();
        switch($s1){
            case "请选择":
                chu();
                break;
            case "2":
                mySwiper.removeSlide(3);
                break;
            case "4":
                mySwiper.appendSlide('<div class="swiper-slide d4">Slide4</div>');
                break;
            case "5":
                mySwiper.appendSlide('[<div class="swiper-slide d4">Slide4</div>,<div class="swiper-slide d5">Slide5</div>]');
                break;

        }
    }
    $("#s1").change(function(){
       // alert('sdsd');
        //如何回到最初的页面进行添加slide???
        chu();
        pin();
    });</script>
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-23 03:49 , Processed in 0.055424 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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