javascript - 在 Javascript 中添加上一个按钮

Question

我正在努力向全屏 slider 添加一个“上一页”按钮，但我不知道如何使该按钮循环返回所有幻灯片，以便当用户单击一次到达第一张幻灯片时再次然后它将转到最后一张幻灯片。

如果用户单击下一个按钮，它将从开始到结束循环，然后再返回开始，一遍又一遍，我只想让上一个按钮执行此操作，但相反。

代码笔是 http://codepen.io/heavymessing/pen/rxVOyN JavaScript:

    var Boxlayout = (function() {

      var $el = $('#bl-main'),
        $sections = $el.children('section'),
        // works section
        $sectionWork = $('#bl-work-section'),
        // work items
        $workItems = $('#bl-work-items > li'),
        // work panels
        $workPanelsContainer = $('#bl-panel-work-items'),
        $workPanels = $workPanelsContainer.children('div'),
        totalWorkPanels = $workPanels.length,
        // navigating the work panels
        $nextWorkItem = $workPanelsContainer.find('nav > span.bl-next-work'),
        $prevWorkItem = $workPanelsContainer.find('nav > span.bl-prev-work'),
        // if currently navigating the work items
        isAnimating = false,
        // close work panel trigger
        $closeWorkItem = $workPanelsContainer.find('nav > span.close'),
        transEndEventNames = {
          'WebkitTransition': 'webkitTransitionEnd',
          'MozTransition': 'transitionend',
          'OTransition': 'oTransitionEnd',
          'msTransition': 'MSTransitionEnd',
          'transition': 'transitionend'
        },
        // transition end event name
        transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
        // support css transitions
        supportTransitions = Modernizr.csstransitions;

      function init() {
        initEvents();
      }

      function initEvents() {

        $sections.each(function() {

          var $section = $(this);

          // expand the clicked section and scale down the others
          $section.on('click', function() {

            if (!$section.data('open')) {
              $section.data('open', true).addClass('bl-expand bl-expand-top');
              $el.addClass('bl-expand-item');
            }

          }).find('span.close').on('click', function() {

            // close the expanded section and scale up the others
            $section.data('open', false).removeClass('bl-expand').on(transEndEventName, function(event) {
              if (!$(event.target).is('section')) return false;
              $(this).off(transEndEventName).removeClass('bl-expand-top');
            });

            if (!supportTransitions) {
              $section.removeClass('bl-expand-top');
            }

            $el.removeClass('bl-expand-item');

            return false;

          });

        });

        // clicking on a work item: the current section scales down and the respective work panel slides up
        $workItems.on('click', function(event) {

          // scale down main section
          $sectionWork.addClass('bl-scale-down');

          // show panel for this work item
          $workPanelsContainer.addClass('bl-panel-items-show');

          var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']");
          currentWorkPanel = $panel.index();
          $panel.addClass('bl-show-work');

          return false;

        });

        // navigating the work items: current work panel scales down and the next work panel slides up
        $nextWorkItem.on('click', function(event) {

          if (isAnimating) {
            return false;
          }
          isAnimating = true;

          var $currentPanel = $workPanels.eq(currentWorkPanel);
          currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0;
          var $nextPanel = $workPanels.eq(currentWorkPanel);

          $currentPanel.removeClass('bl-show-work').addClass('bl-hide-current-work').on(transEndEventName, function(event) {
            if (!$(event.target).is('div')) return false;
            $(this).off(transEndEventName).removeClass('bl-hide-current-work');
            isAnimating = false;
          });

          if (!supportTransitions) {
            $currentPanel.removeClass('bl-hide-current-work');
            isAnimating = false;
          }

          $nextPanel.addClass('bl-show-work');

          return false;

        });

        // navigating the work items: current work panel scales down and the previous work panel slides up
        $prevWorkItem.on('click', function(event) {

          if (isAnimating) {
            return false;
          }
          isAnimating = true;

          var $currentPanel = $workPanels.eq(currentWorkPanel);
          currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 8; // edit this number to your total number of panels -1
          var $prevPanel = $workPanels.eq(currentWorkPanel);

          $currentPanel.removeClass('bl-show-work').addClass('bl-hide-current-work').on(transEndEventName, function(event) {
            if (!$(event.target).is('div')) return false;
            $(this).off(transEndEventName).removeClass('bl-hide-current-work');
            isAnimating = false;
          });

          if (!supportTransitions) {
            $currentPanel.removeClass('bl-hide-current-work');
            isAnimating = false;
          }

          $prevPanel.addClass('bl-show-work');

          return false;

        });

        // clicking the work panels close button: the current work panel slides down and the section scales up again
        $closeWorkItem.on('click', function(event) {

          // scale up main section
          $sectionWork.removeClass('bl-scale-down');
          $workPanelsContainer.removeClass('bl-panel-items-show');
          $workPanels.eq(currentWorkPanel).removeClass('bl-show-work');

          return false;

        });

      }

      return {
        init: init
      };

    })();

HTML:

      <body>
        <div class="container">
          <div id="bl-main">
            <section>

              <div class="bl-content">
                <h2>My Works</h2>
                <p>Mung bean maize dandelion sea lettuce catsear bunya nuts ricebean tatsoi caulie horseradish pea.</p>
                <ul id="bl-work-items">
                  <li data-panel="panel-1">
                    <a href="#"><img src="http://lorempixel.com/g/400/300/abstract/" /></a>
                  </li>
                  <li data-panel="panel-2">
                    <a href="#"><img src="http://lorempixel.com/400/300/" /></a>
                  </li>
                  <li data-panel="panel-3">
                    <a href="#"><img src="http://lorempixel.com/g/400/300/" /></a>
                  </li>
                  <li data-panel="panel-4">
                    <a href="#"><img src="http://lorempixel.com/400/300/sports/" /></a>
                  </li>
                </ul>
                <p>Illustrations by <a href="http://dribbble.com/isaac317/click">Isaac Montemayor</a></p>
              </div>
            </section>


            <!-- Panel items for the works -->
            <div class="bl-panel-items" id="bl-panel-work-items">
              <div data-panel="panel-1">
                <div>
                  <img src="http://lorempixel.com/g/400/300/abstract/" />
                  <h3>Fixie bespoke</h3>
                  <p>Iphone artisan direct trade ethical Austin. Fixie bespoke banh mi ugh, deep v vinyl hashtag. Tumblr gentrify keffiyeh pop-up iphone twee biodiesel. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats.
                    Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
                </div>
              </div>
              <div data-panel="panel-2">
                <div>
                  <img src="http://lorempixel.com/400/300/" />
                  <h3>Chillwave mustache</h3>
                  <p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats
                    irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
                </div>
              </div>
              <div data-panel="panel-3">
                <div>
                  <img src="http://lorempixel.com/g/400/300/" />
                  <h3>Austin hella</h3>
                  <p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin
                    craft beer ugh chambray.</p>
                </div>
              </div>
              <div data-panel="panel-4">
                <div>
                  <img src="http://lorempixel.com/400/300/sports/" />
                  <h3>Brooklyn dreamcatcher</h3>
                  <p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland
                    pug selvage flannel seitan tousled mcsweeney's.</p>
                </div>
              </div>
              <nav>
                <span class="bl-prev-work">&lt; Previous Project</span>
                <span class="bl-next-work">Next Project &gt;</span>
                <span class="close fa fa-close"></span>
              </nav>
            </div>

          </div>
        </div>
        <!-- /container -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/boxlayout.js"></script>
        <script>
          $(function() {
                  Boxlayout.init();
                });
        </script>
        <script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script>
        <script src="http://tympanus.net/codrops/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script>
      </body>

      </html>

谢谢

Answer 1

你应该注意到这个字符串: currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 8; // edit this number to your total number of panels -1

正如评论所说，你应该更改 8至4 (number of your items) - 1 = 3

最后，你应该得到这个:

currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 3;

更新:

更清晰的解决方案应该是使用变量 totalWorkPanels 根据您的总项目数来计算最终数量:

currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : totalWorkPanels-1;