js鼠标点击图片达成自由转换图片的主意,js设置

作者: 关于计算机  发布:2019-09-06

本文实例叙述了js鼠标点击图片达成自由转换图片的不二诀要。分享给大家供大家仿照效法。具体落到实处格局如下:

实比如下:

<html>
<title>鼠标点击图片即可随机变换图片</title>
<body bgcolor="#fef4d9" OnLoad="swapPic()">
<center>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "images/m01.jpg";
images[2] = new Image();
images[2].src = "images/m02.jpg";
images[3] = new Image();
images[3].src = "images/m03.jpg";
images[4] = new Image();
images[4].src = "images/m04.jpg";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
// End -->
</script>
<a onClick="swapPic();">
<img name="randimg" src="images/m09.jpg">
</a>
<br>
<font face="Verdana" size="-2">click image to change
</center>
</body>
</html>
<script>

var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_3.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_1.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_4.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_5.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_6.jpg",
       "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default-2.jpg",
       ];  

var index=Math.floor(Math.random()*8);
var img = imgs[index];
    function time(){

       document.body.style.backgroundImage="url("+img+")";

    }  

document.body.onload = function(){
 time();
}
</script>

企望本文所述对大家的javascript程序设计有着辅助。

上述那篇js设置随机切换背景图片的轻巧实例正是小编共享给大家的全体内容了,希望能给大家三个仿照效法,也目的在于我们多多帮助脚本之家。

您也许感兴趣的小说:

  • js达成网页随机切换背景图片的措施
  • 使用js操作css完成js退换背景图片示例
  • 纯js达成背景图片切换效果代码
  • js达成点击图片改造页面背景图的点子
  • js设置随机切换背景图片的几乎实例

你也许感兴趣的小说:

  • js达成网页随机切换背景图片的情势
  • 选用js操作css达成js改动背景图片示例
  • js鼠标点击图片完毕自由调换图片的秘籍
  • 纯js达成背景图片切换效果代码
  • js达成点击图片更改页面背景图的不二秘籍

本文由今晚买四不像发布于关于计算机,转载请注明出处:js鼠标点击图片达成自由转换图片的主意,js设置

关键词: