加载时显示滑块

Question

我有 3 个 link 允许我在点击 link 时滑动页面。

但是当加载页面时，显示的是空页面，我喜欢加载 id #one blue page 而不是空页面。

有谁能帮我如何在点击任何其他页面之前加载第一页link!

$(function () {

    // get the width of the first content box
    // add a bit of extra so we end up with "-350px"
    var contentWidth = '-' + ($('.content').width() + 50) + 'px';

    // reposition the content here in case javascript is disabled
    $('.content').css({
        position: 'absolute',
        left: contentWidth
    });

    $("li a").click(function () {
        event.preventDefault();
        var $blockID = $( $(this).attr('href') );
        // if the content is already showing, don't do anything
        if ($blockID.hasClass('visible')) { return; }
        // hide any visible content
        $('.content.visible')
            .removeClass('visible')
            // move the old content past the current window width, then reset it's position
            .animate({
                left: '-' + $(window).width()
            }, function () {
                // Remove left setting after the animation completes
                $(this).css('left', contentWidth);
            });
        $blockID
            .addClass('visible')
            .animate({ left: 0 });
    });

});

请参阅 jsfiddle 处的示例...非常感谢。

Answer 1

我已将您的动画移动到一个函数中，这样它就可以在页面加载时以较小的超时时间调用以创建初始延迟。

$(function() {
  setTimeout(function() {
    showDiv($("a[href='#one']"));
  }, 100);

  // get the width of the first content box
  // add a bit of extra so we end up with "-350px"
  var contentWidth = '-' + ($('.content').width() + 50) + 'px';

  // reposition the content here in case javascript is disabled
  $('.content').css({
    position: 'absolute',
    left: contentWidth
  });

  $("li a").click(function() {
    event.preventDefault();
    showDiv($(this));
  });

  function showDiv($this) {
    var $blockID = $($this.attr('href'));
    // if the content is already showing, don't do anything
    if ($blockID.hasClass('visible')) {
      return;
    }
    // hide any visible content
    $('.content.visible')
      .removeClass('visible')
      // move the old content past the current window width, then reset it's position
      .animate({
        left: '-' + $(window).width()
      }, function() {
        // Remove left setting after the animation completes
        $(this).css('left', contentWidth);
      });
    $blockID
      .addClass('visible')
      .animate({
        left: 0
      });
  }

});

.wrapper {
  position: relative;
}

.content {
  width: 300px;
  height: 300px;
  padding: 0;
  left: 0;
  top: 0;
}

.box {
  width: 300px;
  height: 300px;
  opacity: 0.5;
}

#one .box {
  background: red;
}

#two .box {
  background: blue;
}

#three .box {
  background: green;
}

ul li {
  display: inline;
  padding-right: 10px;
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#one">One</a>
  </li>
  <li><a href="#two">Two</a>
  </li>
  <li><a href="#three">Three</a>
  </li>
</ul>
<div class="wrapper">
  <div id="one" class="content">
    <div class="box"></div>
  </div>
  <div id="two" class="content">
    <div class="box"></div>
  </div>
  <div id="three" class="content">
    <div class="box"></div>
  </div>
</div>

加载时显示滑块

show slider when loading

jquery

load

slider