Question

我是jQuery编码的初学者。我想编写一个简单的Slider代码。我可以滑到下一张图片。但是......我怎么能滑回去？也许if / else？

事实：

$(document).ready(function() {

    $("#button").click(function() {
        $("#whiteLayer").slideDown("slow").delay(700).slideUp(400);
            $("#imageOne").delay(700).fadeOut();
            $("#imageTwo").delay(701).show();
});
})

我在codepen上也有一个例子：http://codepen.io/huberloui/pen/WRKwjw

Answer 1

将属性data-toggle添加到标记<a>，其ID为img：

例如：

<li><a href="#" data-target="#imageOne">Test1</a></li>

在javascript / jQuery上按事件获取触发元素： $（document）.ready（function（event）{

$("#button").click(function() {
    var id = $(event.target).prop('data-target'); // event.target is the trigger element

    $("#whiteLayer").slideDown("slow").delay(700).slideUp(400);
        $(id).delay(700).fadeOut();
        $(id).delay(701).show();

}）; }）

Answer 2

考虑到您的代码片段，序列可能如下所示：

从data-target
向下滑动白色图层
隐藏所有图像（重置）但显示目标图像
再次向上滑动白色层

所以这里是更新的片段，其中包含日志记录和代码中的进一步注释。请务必检查HTML（您不需要额外的#来获取ID）。

jQuery(document).ready(function($) {

  $('#nav a').click(function() {
    var targetID = $(this).data('target'); // Select target image.
    $('#whiteLayer').slideDown('slow', function() {
      console.log('slideDown finished');
      $('#imageOne, #imageTwo').hide(); // Hide all images.
      $(targetID).show(); // Show targeted image.
      console.log('show ' + targetID);
    }).slideUp(400, function() {
      console.log('slideUp finished');
    });
  });

});

body {
  font-family: sans-serif;
  padding: 0;
  overflow: hidden;
}
.headerimage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
#nav {
  margin-right: 100px;
  margin-top: 20px;
}
#nav li {
  display: inline;
  float: right;
  position: relative;
  margin-left: 20px;
}
#nav a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}
#whiteLayer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: none;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>

  <div id="whiteLayer"></div>
  <img id="imageOne" class="headerimage" src="https://unsplash.it/600/200?image=29">
  <img id="imageTwo" class="headerimage" src="https://unsplash.it/600/200?image=30" />

  <ul id="nav">
    <li><a href="#" data-target="#imageOne">Test1</a>
    </li>
    <li><a href="#" data-target="#imageTwo">Test2</a>
    </li>
  </ul>

</body>

jQuery slideDown＆amp;节目

2 个答案: