Как изменить изображения при нажатии кнопки

Я хочу изменить изображение, нажав кнопку. У меня две кнопки: одна следующая и другая - предыдущая. Когда следующая кнопка нажимает новое изображение, должна отображаться, а предыдущая кнопка - последним изображение должно появиться 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

Лучшим решением было бы сохранить изображения как пронумерованные, например: image1, image2 ...... и т. д., когда wri ting logic в jquery, просто конструируйте имя изображения каждый раз, когда нажимается клик, увеличивайте значение индекса и предыдущего обратного. 'var img =" image "; var index = 0; var imgName = img + index; ' – dreamweiver

, используя приведенную выше логику, вы можете динамически конструировать контейнер 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

Как об изменении СРК изображения?

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

Как изменить изображения при нажатии кнопки

ответ

Смежные вопросы