0

我目前正在使用 Swipe.js ( https://github.com/bradbirdsall/Swipe/blob/master/README.md ) 作为我用于网站的轮播。我对此有点陌生,可以使用一些帮助。我的代码在下面,并在http://jsfiddle.net/eg5d2/1/上保存了一个简短的示例,以使生活更轻松一些。谢谢!

Swipe 公开了一些对滑块的脚本控制有用的功能。

prev() 滑动到上一个

next() 滑动到下一个

getPos() 返回当前幻灯片索引位置

getNumSlides() 返回幻灯片的总数

slide(index, duration) 滑动设置索引位置(持续时间:以毫秒为单位的过渡速度)

                            <div id='mySwipe4' class='swipe'>
                            <div class='swipe-wrap'>
                                <div>
                                    <img src="activation-1.jpg" />
                                </div>
                                <div>
                                    <img src="activation-1.jpg" />
                                </div>
                                <div>
                                    <img src="activation-1.jpg" />
                                </div>
                                <div>
                                    <img src="activation-1.jpg" />
                                </div>
                            </div>
                        </div>
<div id="slide-indicators">INSERT SLIDE INIDCATOR HERE / TOTAL NUMBER OF SLIDES</div>
<script>
    window.mySwipe4 = new Swipe(document.getElementById('mySwipe4'), {
  continuous: true,
  disableScroll: false,
  stopPropagation: false

});
</script>
4

1 回答 1

0

干得好。我删除了disableScrollandstopPropagation值,因为默认情况下它们是 false 。

<div id='mySwipe4' class='swipe'>
    <div class='swipe-wrap'>
        <div>
            <img src="activation-1.jpg">
        </div>
        <div>
            <img src="activation-1.jpg">
        </div>
        <div>
            <img src="activation-1.jpg">
        </div>
        <div>
            <img src="activation-1.jpg">
        </div>
    </div>
</div>

<div id="slide-indicators">1 / 1</div>

<script src="swipe.js"></script>
<script>
    // Variables
    var elem = document.getElementById('mySwipe4');
    var currentSlide = getPos() + 1; // because slide count starts at 0
    var totalSlides = getNumSlides();

    // Functions
    window.mySwipe = Swipe(elem, {
      continuous: true,
      callback: function(index, element) {
        document.getElementById('slide-indicators').innerHTML = currentSlides + ' / ' + totalSlides;
      }
    });
    document.getElementById('slide-indicators').innerHTML = currentSlides + ' / ' + totalSlides;
</script>
于 2013-06-25T17:52:33.700 回答