Question

我是编程的新手，但仍在学习......

我的问题是：我想用一个按钮和一些fadeIn和fadeOut动画更改图像，其中三个。因此，首先隐藏所有这些（图像），然后只需单击第一张图片就会显示淡入效果，然后下一次单击第一张图片消失，第二张图片出现等等......

这是我的HTML ..

<button id="animeButton">Animate</button> <br>
<img id="firstPic" class="images" src="http://paladone.com/ 
image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">
<img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-      
content/uploads/2009/05/furious-george.jpg?w=557">
<img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">

这是我的jq ......

$(document).ready(function() {
$(".images").hide();    
});

$(document).ready(function(){
$("#animeButton").click(function(){
$("#firstPic").fadeIn(2000);
//dunno what to write next....
});
});

Answer 1

首先，您需要添加数据属性，例如

<img id="firstPic" data-id="1" class="images" src="http://paladone.com/ 
    image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

然后

$(document).ready(function(){
    imgID = 1;
    $("#animeButton").click(function(){
        if (imgID>3) {
           imgID = 1
        }
        $($('[data-id="'+imgID+'"]')).fadeIn(2000);
        imgID = imgID+1
    });
});

尚未测试，但应该可以使用。

Answer 2

也许你可以试试这个：

$(document).ready(function() {
    $(".images").hide();

  var picArr = ["firstPic","secondPic","thirdPic"];
  // set attr to button to store next pic
  $("#animeButton").attr("nextPic", picArr[0]);
  var c = 0;

  $("#animeButton").click(function(){
    var btn = $(this).attr("nextPic");
    var currVisible = $(".images:visible").attr("id");
    $("#" + btn).fadeIn(2000, function() {
      c += 1;
      if (c >= picArr.length) c = 0;
      $("#animeButton").attr("nextPic", picArr[c]);
    });
    $("#" + currVisible).fadeOut(2000);
  });
});

Answer 3

这将有效，请查看：

＆＃13;

$(document).ready(function() {
  $('.images').hide();

  var counter = 0;
  var picArray = [];

  $("div").find("img").each(function(index, value) {
    picArray[index] = $(this);
  })

  $('#animeButton').click(function() {
    if (counter == 0) {
      picArray[picArray.length - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
      })

    } else {
      picArray[counter - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
        if (counter > picArray.length - 1) {
          counter = 0;
        }
      })
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="animeButton">
  Animate
</button>
<br/>

<div>
  <img id="firstPic" class="images" src="http://paladone.com/image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

  <img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-content/uploads/2009/05/furious-george.jpg?w=557">

  <img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">
</div>

＆＃13;

如何使用jq只用一个按钮来更改图像

3 个答案: