如何更改按钮图像点击

我想按button.I改变形象有两个按钮，一个是未来等是previous.When下一个按钮按新的图像必须被证明和以前的按钮按下最后图像应该来agian.But我不能做到这一点。如何使用jQuery来做到这一点？如何更改按钮图像点击

$(document).ready(function() { 
$('#image2').hide(); 
$('#image3').hide(); 
$(".arrow").click(function() { 
     $('#image1').hide(); 
     $('#image2').show(); 
    }); 
});

HTML是

<div class="imageDiv"> 
    <div><img src="potraits.jpg" class="image" id="image1"/></div> 
    <div><img src="pot.jpg" class="image" id="image2"/></div> 
    <div><img src="potri.jpg" class="image" id="image3"/></div> 
    <div><input type="image" src="arrow.gif" class="arrow"/></div> 
    <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div> 
</div>

来源

2013-04-17 Niths

最好的解决办法是保持图像的编号，如：图像1，图像2 ......等等，当WRI廷逻辑jQuery中，只是每次contruct图像名称，当下一个被点击的增量上以前reverse.'var IMG =“图像”指数的和的值; var index = 0; VAR imgName = IMG +指数;' – dreamweiver

使用上述逻辑可以动态contruct在div容器，不需要隐藏功能。 **写少做更多** – dreamweiver

这样的事情？ http://jsfiddle.net/S6t9R/1/没有looparound，你可以添加它。 – user2264587

http://jsfiddle.net/S6t9R/4/

$(document).ready(function() { 
    $('img:not(:first)').hide(); 
    $(".arrow").click(function() { 
     $('img:not(:last):visible'). 
     hide(). 
     parent(). 
     next(). 
     children(). 
     show(); 
    }); 
    $(".leftarrow").click(function() { 
     $('img:not(:first):visible'). 
     hide(). 
     parent(). 
     prev(). 
     children(). 
     show(); 
    }); 
});

基本上是可见的图像隐时现，而下一个/上一个影像是现在可见

来源

2013-04-17 09:14:23 user2264587

如何改变图像的src？

的JavaScript：

var images = [ 
    "alpha.jpg", 
    "beta.jpg", 
    "gamma.jpg" 
]; 
var actImg = 0; // index of actual image 

$(document).ready(function() { 
    $(".leftarrow").click(function() { 
     if (actImg <= 0) { // if first image is displayed, jump to last 
      actImg = images.length - 1; 
     } 
     else { 
      actImg--; 
     } 
     $('#onlyimage').attr('src', images[actImg]); 
    }); 
    $(".rightarrow").click(function() { 
     if (images.length <= actImg) { // if last image is displayed, jump to first 
      actImg = 0; 
     } 
     else { 
      actImg++; 
     } 
     $('#onlyimage').attr('src', images[actImg]); 
    }); 
});

HTML：

<div class="imageDiv"> 
    <div><img src="alpha.jpg" class="image" id="onlyimage"/></div> 
    <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div> 
    <div><input type="image" src="rightarrow.gif" class="rightarrow"/></div> 
</div>

来源

2013-04-17 08:37:23

我有3个图像显示 – Niths

更新了我的回答，您可以定义3倍或更多的图像，并通过他们与箭头迭代。 –

也许在这种情况下，你可以隐藏/显示您的图片，在div元素。如果您按照自己的方式隐藏图像，div本身在文档中仍然是“可见的”，这可能会给您带来不必要的结果。

来源

2013-04-17 08:37:44

Change your script, 

$(document).ready(function() { 
    $('#secondimage').hide(); 
    $('#thirdimage').hide(); 
$(".arrow").click(function() { 
    $('#firstimage').hide(); 
    $('#secondimage').show(); 
    }); 
$(".leftarrow").click(function() { 
    $('#firstimage').show(); 
    $('#secondimage').hide(); 
    }); 
});

来源

2013-04-17 08:40:37 Shin

我还有一张展示图片 – Niths

$(document).ready(function() { 
    that = this; 
    this.arrayImages = $('.image'); 
    this.currentPosition = 0; 
    $('#secondimage').hide(); 
    $('#thirdimage').hide(); 
    $(".arrow").click(function() { 
     if (that.currentPosition < that.arrayImages.length) { 
      that.arrayImages[that.currentPosition].hide(); 
      that.arrayImages[that.currentPosition+1].show(); 
      that.currentPosition++; 
     } 
    }); 
});

对于LEFTARROW这只是另一种方式（：

来源

2013-04-17 09:13:38

如何更改按钮图像点击

回答

相关问题