如何更改按鈕圖像點擊

我想按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

如何更改按鈕圖像點擊

回答

相關問題