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

Question

У меня есть изображение и кнопка внутри панели.

Когда кнопка нажата, я хочу, чтобы мое изображение было заменено другим изображением в случайном порядке на основе массива сохраненных изображений.

Я застрял в реализации функции изменения изображения внутри кнопки.

Помощь будет оценена по достоинству.

Answer 1

Вы можете сделать это с помощью JQuery по:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script> 

    $(document).ready(function() { 
     // Handler for .ready() called. 
     var imageList = ['one.png', 'two.png', 'three.png', 'four.png']; 

     $('#btn').click(function(){ 
      var imgName = imageList[Math.floor(Math.random()*imageList.length)]; 
      $('#image').attr('src', imgName); 
     }); 

    }); 


</script> 

<button id="btn">Click Me</button> 
<img id="image" src="someimage.png" /> 

Answer 2

refToYourImage.onclick = function() { 
    refToYourImage.src = arrOfRandomImages[Math.floor(Math.random() * arrOfRandomImages.length)]; 
} 

Answer 3

Что-то вроде этого?

<img id = "IM" src = "someImageReference"/> 
<button onclick = "changeImage(document.getElementById('IM'))">Change image</button> 
<script type = "text/javascript"> 
function changeImage(image) { 
    var images = new Array{"image paths","here"}; 
    var rand = Math.round(Math.random() * images.length); 
    image.src = images[rand]; 
} 
</script> 

Answer 4

Лучшим было бы иметь отдельную панель с макетом карты для изображений. Таким образом, вы можете легко добавлять анимацию при перемещении изображений.

Пример

new Ext.Panel({ 
id:'imagePanel', 
    layout: 'card', 
    cardSwitchAnimation: 'fade', 
items:[ 
    {html:'<img src="/img1.jpg" />'}, 
    {html:'<img src="/img2.jpg" />'}, 
    {html:'<img src="/img3.jpg" />'}, 
    {html:'<img src="/img4.jpg" />'} 
] 
    }); 

И затем это переключить изображение

Ext.getCmp('imagePanel').setActiveItem(Math.floor(Math.random()*numImages);