javascript - 使用javascript设置随机图像

标签 javascript html css image

我对 javascript 比较陌生,因此,当我的页面加载无效时,我获取随机图像以显示的代码无法正常工作。我已经查看了几个示例来尝试解决问题,但经过几个小时的搜索后,我准备好按下帮助按钮。我已经为我的页面包含了 HTML 和脚本。此外,我已经评论了我试图操纵的 IMG 标签。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome in.</title>
<link href="home.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="slides.js"></script>
<script>
//This is where I am attempting to set an random image to load.
function()
{   
    //Array of quotes
    var randomImages= new Array ("Images/quote1.png", "Images/quote2.png","Images/quote3.png", "Images/quote4.png", "Images/quote5.png","Images/quote6.png","Images/quote7.png","Images/quote8.png");

    //Random number to select an image. Use 8, not 7, since javascript arrays are 0 based
    //Math.floor will take us from a floating point number to an integer base
    var randomNumber = Math.floor(7*Math.random());


    //Display that image
    document.getElementById('quoter').setAttribute('src',randomImages[randomNumber]);
}
</script>
</head>
<body onLoad="function()">
<a href="aboutme.html" id="aboutMe"><img src="Images/aboutme.png" alt="aboutme"/></a>
<a href="aboutme.html" id="contact"><img src="Images/contact.png" alt="aboutme"/></a>
<a href="aboutme.html" id="blog"><img src="Images/blog.png" alt="aboutme"/></a>
<a href="aboutme.html" id="wife"><img src="Images/mywife.png" alt="aboutme"/></a>
<div id="mid">
</div>
<div id="slideshow">
   <div>
     <img src="Images/dummypic.png" alt="me">
   </div>
   <div>
     <img src="Images/dummypic2.png" alt="me">
   </div>
   <div>
     <img src="Images/dummypic3.png" alt="me">
   </div>
</div>
<div>
<img id="quoter" src="" alt="quotes"> <!--This is what I am trying to make random when the page loads-->
</div>
</body>
</html>

最佳答案

为您的函数提供一个名称。

不可能是function() , 应该是function function_name()然后像<body onLoad="function_name()">一样在body onLoad上使用它

正如您所包含的 jquery-1.7.1.min.js ,你可以试试这段代码,你应该删除 body onload 属性。

$(function(){
    //Array of quotes
    var randomImages= new Array ("Images/quote1.png", "Images/quote2.png","Images/quote3.png", "Images/quote4.png", "Images/quote5.png","Images/quote6.png","Images/quote7.png","Images/quote8.png");

    //Random number to select an image. Use 8, not 7, since javascript arrays are 0 based
    //Math.floor will take us from a floating point number to an integer base
    var randomNumber = Math.floor((randomImages.length-1)*Math.random());

    //Display that image
    $('#quoter').prop('src',randomImages[randomNumber]);
});

关于javascript - 使用javascript设置随机图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13022953/

相关文章:

jquery mobile风格不适用于详情页的二次导航

javascript - 样式标签中的 CSS 未显示在元素中?

javascript - 细胞着色

javascript - 如何使用 JS 使用单选按钮更改容器边框的颜色?

javascript - Blur.js 中的缓存前缀是什么?

javascript - JQuery 在不同的 div 上悬停 fadeIn/fadeOut

html - 如何将文本区域中的文本放入段落中?

javascript - 将字符串格式化为数组

javascript - How to load a div with a flash object, but not display it (元素加载,不显示)

CSS 下拉菜单 : nav ul ul li Moved to Right