javascript - 如何用jq一键换图

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
    });
});

尚未测试，但应该可以。