圖像的反轉陣列單擊按鈕時

我有這個網站，我想知道是否有可能切換此圖像時點擊按鈕，但只顯示一次一個，使用jquery圖像的反轉陣列單擊按鈕時

<div class="section"> 
      <img class="changeimg" src="images/cresta.svg"> 
      <img class="changeimg" id="none" src="images/longitud.svg"> 
      <img class="changeimg" id="none" src="images/amplitud.svg"> 
      <img class="changeimg" id="none" src="images/frecuencia.gif"> 
      <div class="changebutton">Cambiar</div> 
     </div>

來源

2016-12-29 Diego Cervantes

是的可能...嘗試一下，讓我們知道它是怎麼回事 – Dalorzo

有可能使用絕對定位和顯示屬性這裏是一個簡單的演示

<!DOCTYPE html> 
 
<html lang="en"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <style> 
 
     .section { 
 
      position: relative; 
 
      width: 200px; 
 
      height: 200px; 
 
     } 
 
     
 
     .changeimg { 
 
      position: absolute; 
 
      display: none; 
 
      width: 200px; 
 
      height: 200px; 
 
     } 
 
     
 
     .show { 
 
      display: block; 
 
     } 
 
     
 
     .changebutton { 
 
      width: 100px; 
 
      position: relative; 
 
      color: blue; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="section"> 
 
     <img class="changeimg show" id="first" style="background-color:aqua;" src="images/cresta.svg"> 
 
     <img class="changeimg" style="background-color:red " src="images/longitud.svg"> 
 
     <img class="changeimg" style="background-color:black " src="images/amplitud.svg"> 
 
     <img class="changeimg" style="background-color:wheat " src="images/frecuencia.gif"> 
 
    </div> 
 
    <div class="changebutton">Cambiar</div> 
 
</body> 
 
<script> 
 
    $('.changebutton').click(function() { 
 
     var show = $('.show'); 
 
     show.removeClass('show'); 
 
     if (show.next().length > 0) { 
 
      show.next().addClass('show'); 
 
     } else { 
 
      $('#first').addClass('show'); 
 
     } 
 
    }); 
 
</script> 
 

 
</html>

來源

2016-12-29 00:52:23 nikehu

試試這個...

jQuery("#clickme").click(
 
(function(){ 
 
    var i=0; 
 
    function toogle(){ 
 
     jQuery(".changeimg").hide(); 
 
     jQuery(jQuery(".changeimg").get(i)).show(); 
 
     i+=1; 
 
     if (i>jQuery(".changeimg").length)i=0; 
 
    } 
 
    return toogle; 
 
})() 
 
);

img{ 
 
    width:80px; 
 
    height:80px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="clickme"> 
 
      toogle the Rabbit yay!! 
 
      </button> 
 
<div class="section"> 
 
      <img class="changeimg" src="http://weknowyourdreams.com/images/rabbit/rabbit-02.jpg"> 
 
      <img class="changeimg" src="http://weknowyourdreams.com/images/rabbit/rabbit-03.jpg"> 
 
      <img class="changeimg" src="http://weknowyourdreams.com/images/rabbit/rabbit-07.jpg"> 
 
      <img class="changeimg" src="http://weknowyourdreams.com/images/rabbit/rabbit-01.jpg"> 
 
      
 
     </div>

來源

2016-12-29 01:17:57 areiilla

晚上好！是的，這可以使用jQuery;雖然如果你真的在考慮旋轉木馬效果，我建議你使用諸如owlCarousel之類的插件。

當您使用jQuery進行編程時，您必須考慮如何通過jQuery API操縱html。首先，讓我們通過思考來解決我們的問題。首先）我們有四個圖像，我們希望在間隔時間內一次顯示一個圖像（在這種情況下，我推薦它的大小總是固定的，例如，400像素×400像素或任何其他大小，這並不重要）。其次）使用jQuery，我們可以用簡單的$（'img'）來獲取每個img元素標籤。我們可以做兩件事。解決方案I：我們根據自己的願望創建一個img元素標籤並根據我們的願望進行設計（現在是調試目的），然後，如果這是我們頁面中唯一的img標籤，我們實際上可以抓住那個img （）並將其保存到JS中的var中：var myImg = $（'img'）;然後使用jQuery的真棒API，我們可以使用一個名爲setInterval（function（）{alert（「Hello」）;}，3000）的函數。括號內是我們希望執行的匿名函數的代碼，這是我們的第一個參數;第二個參數就是函數一遍又一遍地運行直到你停止它的時間間隔（在這種情況下，我們不會）。

但是什麼樣的代碼會改變它？那麼，這就是所謂的DOM操作。我們實際上也可以使用API中提供的另一個名爲.attr（'attrName：desiredValue'）的jQuery函數來更改屬性值;

這裏是代碼背後的思維邏輯，你必須編寫它：

保存在使用jQuery選擇一個變量img元素標籤。在一個間隔函數中，執行一個for循環，從零到n個圖片。在for循環中，將img src屬性值更改爲任何圖像的源代碼（您可以在數組內部定義圖像源，它會更好，因爲imgSources = ['source1'，... 'sourceN'];）並且每n毫秒與i計數器平等地循環。或者更好的是，不需要for循環，只需將數組值的當前計數器i賦值給src屬性，然後增加它，並添加一個標記，以便當它達到最大值時，讓我們說array.length - 1最大值，我們重置爲0，好嗎？

然後嘗試一下。有了這個，我們有一個img標籤，它的src屬性每n毫秒就會改變一次。

來源

2016-12-29 01:24:00

圖像的反轉陣列單擊按鈕時

回答

相關問題