Question

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

Answer 1

晚上好！是的，这可以使用jQuery;虽然如果你真的想到旋转木马的效果，我建议你使用像owlCarousel这样的插件。

使用jQuery编程时，必须考虑如何通过jQuery API操作html。首先，让我们通过思考来解决我们的问题。

首先）我们有四个图像，我们希望在一个间隔时间内一次显示一个（在这种情况下，我建议它总是固定的尺寸，例如400px×400px或任何其他尺寸，这没关系）。

第二）使用jQuery，我们可以使用简单的$（'img'）获取每个img元素标记。我们可以做两件事。

解决方案I：我们创建一个img元素标签并根据我们的愿望设计它，现在用简单的css（调试目的）然后，如果这是我们页面中唯一的img标签，我们实际上可以抓住那个img（）并将其保存为JS中的var：var myImg = $（'img'）;然后使用jQuery的awesome API，我们可以使用一个名为setInterval的函数（function（）{alert（“Hello”）;}，3000）;括号内的是我们希望执行的匿名函数的代码，这是我们的第一个参数;第二个参数只是函数将一次又一次地运行的间隔，直到你停止它（在这种情况下我们没有）。

但是什么样的代码会让它改变？好吧，这叫做DOM操作。实际上，我们还可以使用API中提供的另一个jQuery函数来更改属性值：.attr（'attrName：desiredValue'）;

以下是代码背后的思维逻辑，您必须对其进行编码：

使用jQuery选择器将img元素标记保存在变量中。在区间函数内，执行从零到n个图像的for循环。在for循环中，将img src属性值更改为图像源的任何值（您可以在数组中定义图像源，它会更好，因为imgSources = ['source1'，...' sourceN'];）并且每n毫秒与i计数器同等地循环。或者更好的是，不需要for循环，只需将数组值的当前计数器i分配给src属性并在此后增加它，并添加一个sentinel，这样当它达到最大值时，让我们说array.length - 1最大，我们重置为0，好吗？

试一试。有了这个，我们有一个img标签，其src属性将每n毫秒更改一次。

Answer 2

可以使用绝对定位和显示属性这是一个简单的演示

＆＃13;

//create 1D array
int *labels1D = new int[rows*cols];

//copy contents
int *targetPointer = labels1D;
int **sourcePointer = labels;
int *endTargetPointer = targetPointer + rows*cols;
while( targetPointer != endTargetPointer) {        
    std::copy_n(*sourcePointer++, cols, targetPointer );
    targetPointer += cols;
}

＆＃13;

Answer 3

试试这个......

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>

单击按钮时切换图像数组

3 个答案: