[英]Change Image when a button is clicked
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.单击按钮时,我希望根据存储的图像数组随机将我的图像替换为另一个图像。
I'm stuck on implementing a change image function within the button.我坚持在按钮内实现更改图像功能。
Assistance would be appreciated.将不胜感激。
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" />
refToYourImage.onclick = function() {
refToYourImage.src = arrOfRandomImages[Math.floor(Math.random() * arrOfRandomImages.length)];
}
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>
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.