转换翻书滑块使其循环+如果可以使其响应

时间:2013-05-10 13:45:21

标签: javascript jquery loops slider page-flipping

我是Javascripting的新手,所以对我来说无论如何这是我的问题:

以下是相关网站:http://jemmarieann.com/flipbookslideshow/marcbuils-Flippage-c46f6d1/exemples/exemples3.html

所以我使用了这个预制的Jquery:http://marcbuils.github.io/Flippage/

  1. 问题是要翻页,你必须点击我想要的图像,这样图像每隔3-5秒左右就会自动翻转。

    我能做的是自动将第1页翻到第2页,但之后没有任何反应。因为我是新手,所以我很确定我错过了很多。

  2. 我能够在dreamweiver的帮助下自动翻转,但是当它到达最后一张图像时会停止它如何让它回到第一张图像并循环?

         <script type="text/javascript">
    
    
    
        setInterval(check, 1000); // trigger check function every 1 sec
    
        function check()
    
       {
    
          var $nextItem = $('.exemples.active')
          .trigger('next')
          .removeClass('active')
          .next('.exemples');
    
    
       if ($nextItem.length == 0) $nextItem = $('.exemples').first(); 
    
           $nextItem.trigger('next').addClass('active');
    
        };
    
    
    
       </script>
    
  3. 这是正文代码

    <body>
    <div>
    <div id="wrapper">
    <div class="exemples">
        <div><img src="img/1.jpg" style="margin-left: 0px;" /></div>
        <div><img src="img/1.jpg" style="margin-left: -683px;" /></div>
        <div><img src="img/FA_WEB1B.jpg" style="margin-left: 0px;" /></div>
        <div><img src="img/FA_WEB1B.jpg" style="margin-left: -683px;" /></div>
        <div><img src="img/2.jpg" style="margin-left: 0px;" /></div>
        <div><img src="img/2.jpg" style="margin-left: -683px;" /></div>
        <div><img src="img/front.jpg" style="margin-left: 0px;" /></div>
        <div><img src="img/front.jpg" style="margin-left: -683px;" /></div>
        <div><img src="img/3.jpg" style="margin-left: 0px;" /></div>
        <div><img src="img/3.jpg" style="margin-left: -683px;" /></div>
        <div><img src="img/lopulent5.jpg" style="margin-left: 0px;" /></div>
        <div><img src="img/lopulent5.jpg" style="margin-left: -683px;" /></div>
      </div>
      </div>
                <div><a href="#" onClick="$('.exemples:eq(0)').trigger('previous'); return false;">Previous</a> - <a href="#" onClick="javascript:$('.exemples:eq(0)').trigger('next'); return false;">Next</a></div>
            </div>  
    </body>
    

1 个答案:

答案 0 :(得分:0)

我已检查过插件及其功能,我猜您需要自动触发下一步选项。

我这样做

setTimeout(check, 1000); // trigget check function every 1 sec
function check()
{
    $('#exemples').trigger('next');
}