Question

在这里，我想使用animate事件创建图像滑块。但是，当我点击第二次替换图像时，单击一次图像时不能替换。

var $j = jQuery.noConflict();
var i = 1;
$(document).ready(function() {
  $('button').click(function() {
    setInterval(function() {
      var img = "<img src='images/img" + i + ".jpg' />";
      var $lefty = $j('.image').html(img);
      $lefty.animate({
        left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
      }, function() {
        var $marginLefty = $j('.image').html(img);
        $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ?
            $marginLefty.outerWidth() : 0
        });
      });
      if (i == 4)
        i = 0;
      i++;
    }, 1000);
  });
});

 .slide .inner {
   left: 60px;
   bottom: 0;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="jquery-1.11.2.min.js"></script>
  <link href="style.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="jquery.js"></script>

</head>

<body>

  <div id="slidebottom" class="slide">
    <button>slide it</button>
    <div class="inner">
      <img id="img" src="images/audi_r8_in_snow-1280x720.jpg" />
    </div>
  </div>

</body>

</html>

点击事件执行两次时有效。但我希望单一时间表现图像会改变。谢谢。

使用jQuery创建自己的滑块

0 个答案: