网页随机不重复显示图片代码

JavaScript018

网页随机不重复显示图片代码,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

</head><script language="JavaScript">

today=new Date()

jran=today.getTime()

function rnd() {

ia=9301

ic=49297

im=233280

jran = (jran*ia+ic) % im

return jran/(im*1.0)

}

function rand(number) {

return Math.ceil(rnd()*number)

}

document.write("<center>")

for(i=1i<=1i++) {

myNum=(rand(3))//改成你要随机显示的图片数；

if(myNum == 1) document.write("<img src='1.jpg'>")//图片路径，可用http://

if(myNum == 2) document.write("<img src='2.jpg'>")

if(myNum == 3) document.write("<img src='3.jpg'>")

else {

document.write()

}

}

document.write("</center>")

</script>

<body>

</body>

</html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>slider幻灯片 - 纯JS简化版</title>

<style type="text/css">

*{margin: 0padding: 0}

#sliderbox { width: 500height:313pxposition: relativeoverflow: hiddenmargin: 20px}

#slider {list-style: nonemargin: 0padding: 0}

#slider li {float:leftmargin: 0padding: 0}

#slidertab {position: absoluteright: 10pxbottom:10pxwidth: 80pxheight: 20pxlist-style: none}

#slidertab li {float: leftwidth: 20pxheight: 20pxmargin: 2pxbackground: #eeetext-align: centerline-height: 20pxfont-size: 12px}

#slidertab li.sliderclass {background: #f00}

</style>

<script type="text/javascript">

window.onload = function() {

var sliderbox = document.getElementById('sliderbox')

var slider = document.getElementById('slider')

var sliderli = slider.getElementsByTagName('li')

var slidertab = document.getElementById('slidertab')

var slidertabli = slidertab.getElementsByTagName('li')

var inow = 0

sliderbox.onmouseover = function() {

clearInterval(timer)

}

sliderbox.onmouseout =function() {

timer = setInterval(autoplay, 1000)

}

for(var i=0i<slidertabli.lengthi++) {

slidertabli[i].index = i

slidertabli[i].onclick = function() {

clearInterval(timer)

for(var a=0a<slidertabli.lengtha++) {

slidertabli[a].className = ""

sliderli[a].style.display = "none"

}

this.className = "sliderclass"

sliderli[this.index].style.display = "block"

inow = this.index

}

}

function autoplay() {

for(var i=0i<sliderli.lengthi++) {

sliderli[i].style.display = 'none'

slidertabli[i].className = ""

}

sliderli[inow].style.display = 'block'

slidertabli[inow].className = "sliderclass"

inow = inow==sliderli.length-1 ? 0 : inow+1

}

timer = setInterval(autoplay, 5000)

}

</script>

</head>

<body>

<div id="sliderbox">

<ul id="slider">

<li><img src="tab1.jpg" /></li>

<li><img src="tab2.jpg" /></li>

<li><img src="tab3.jpg" /></li>

</ul>

<ul id="slidertab">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

</div>

</body>

</html>