Javascript：图片更改无法正常工作 [英] Javascript: Image change not working
本文介绍了Javascript：图片更改无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
代码不显示任何图像。请帮助。
< ！DOCTYPE html >
< html >
< body >
< script 类型 = text / javascript >
var myVar = setInterval（ function （）{randim（）}， 1000 ）;
function randim（）{
var bannerImages = new Array （）;
bannerImages [ 0 ] = 1。 JPG;
bannerImages [ 1 ] = 2。 JPG;
bannerImages [ 2 ] = 3。 JPG;
bannerImages [ 3 ] = 4。 JPG;
bannerImages [ 4 ] = 5。 JPG;
bannerImages [ 5 ] = 6。 JPG;
bannerImages [ 6 ] = 7。 JPG;
var randomImageIndex = 0 ;
randomImageIndex = Math .round（ Math .random（）* 6 ）;
}
function myStopFunction（）
{
clearInterval（myVar）;
}
< / script >
< < span class =code-leadattribute> p > 此页面上的脚本启动此图像更改： < / p >
< img src = \ + bannerImages [randomImageIndex ] +\ >
< 按钮 onclick = myStopFunction（） > 停止图片< / button >
< / body >
< / html >
解决方案
< style 类型 = text / javascript >
var images = new Array（'image1.jpg'，'image2.jpg'，'etc'）;
函数ChangeLogo（）
{
var i = document.getElementById（'theImg'）;
//从数组中随机选取图像
i.src = images [Math.floor（Math.random（）* i.length）];
setTimeout（ChangeLogo（），8000）; //每8秒更改一次徽标
}
window.onload = ChangeLogo; //加载页面后开始更改
< / script >
见http://www.brothercake.com/site/resources/scripts/transitions/ [ ^ ]用于执行图像转换的一些代码的站点。
感谢Mahesh。您的解决方案有效： -
< ！DOCTYPE html >
< html >
< body >
< script 类型 = text / javascript >
var myVar = setInterval（function（）{randim（）}，1000） ;
函数randim（）{
var bannerImages = new Array（）;
bannerImages [0] =1.jpg;
bannerImages [1] =2.jpg;
bannerImages [2] =3.jpg;
bannerImages [3] =4.jpg;
bannerImages [4] =5.jpg;
bannerImages [5] =6.jpg;
bannerImages [6] =7.jpg;
var randomImageIndex = 0;
randomImageIndex = Math.round（Math.random（）* 8）;
var img1 = document.getElementById（demo）;
img1.src = bannerImages [randomImageIndex];
}
函数myStopFunction（）
{
clearInterval（myVar）;
}
< / script < span class =code-keyword>>
< p > 此页面上的脚本启动此图像更改：< / p >
< img id = 演示 src = i.jpg / >
< 按钮 onclick = myStopFunction（） > 停止图片< / button >
< / body >
< / html > ;
The code doesn't show any image. Please help.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var myVar = setInterval(function(){randim()},1000);
function randim(){
var bannerImages = new Array( );
bannerImages[0] = "1.jpg";
bannerImages[1] = "2.jpg";
bannerImages[2] = "3.jpg";
bannerImages[3] = "4.jpg";
bannerImages[4] = "5.jpg";
bannerImages[5] = "6.jpg";
bannerImages[6] = "7.jpg";
var randomImageIndex = 0;
randomImageIndex = Math.round( Math.random( ) * 6 );
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>
<p>A script on this page starts this image change:</p>
<img src="\""+bannerImages[randomImageIndex]+"\"">
<button onclick="myStopFunction()">Stop image</button>
</body>
</html> 解决方案
<style type="text/javascript"> var images = new Array('image1.jpg', 'image2.jpg', 'etc'); function ChangeLogo() { var i = document.getElementById('theImg'); // randomly pick image from array i.src = images[Math.floor(Math.random()*i.length)]; setTimeout("ChangeLogo()", 8000); // Change logo every 8 seconds } window.onload = ChangeLogo; // Start change once page loaded </script>
See this http://www.brothercake.com/site/resources/scripts/transitions/[^] site for some code for doing image transitions.
Thanks Mahesh . Your solution works:-
<!DOCTYPE html> <html> <body> <script type="text/javascript"> var myVar = setInterval(function(){randim()},1000); function randim(){ var bannerImages = new Array( ); bannerImages[0] = "1.jpg"; bannerImages[1] = "2.jpg"; bannerImages[2] = "3.jpg"; bannerImages[3] = "4.jpg"; bannerImages[4] = "5.jpg"; bannerImages[5] = "6.jpg"; bannerImages[6] = "7.jpg"; var randomImageIndex = 0; randomImageIndex = Math.round( Math.random( ) * 8 ); var img1 = document.getElementById("demo"); img1.src = bannerImages[randomImageIndex]; } function myStopFunction() { clearInterval(myVar); } </script> <p>A script on this page starts this image change:</p> <img id="demo" src="i.jpg" /> <button onclick="myStopFunction()">Stop image</button> </body> </html>
这篇关于Javascript：图片更改无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
