图像的反转阵列单击按钮时

我有这个网站，我想知道是否有可能切换此图像时点击按钮，但只显示一次一个，使用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

图像的反转阵列单击按钮时

回答

相关问题