单击按钮时更改图像

I have an image and a button within a panel.

我在面板中有一个图像和一个按钮。

When the button is clicked I would like my image to be replaced with another image at random based on an array of stored images.

单击按钮时，我希望我的图像可以根据存储的图像数组随机替换为另一个图像。

Im stuck on implementing a change image function within the button.

我坚持在按钮内实现更改图像功能。

Assistance would be appreciated.

将不胜感激。

4 个解决方案

#1

You could do it using jQuery by:

你可以使用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" />

#2

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

#3

Something like this?

像这样的东西？

<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>

#4

The best would be to have a separate panel with a card layout for the images. This way you can easily add animations when swiching the images.

最好的方法是为图像设置一个带卡片布局的独立面板。这样，您可以在切换图像时轻松添加动画。

Example

例

   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" />'}
]
    });

And then have this to switch the image

然后让它切换图像

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

#1