我有这么一段代码,是关于DIV背景图片变换的
我搞了一个图片自动循环变换,另外加上了两个按钮,当点击按钮时,图片也会变换
但我把这两个搞在一起时,点击按钮变换图片不起作用了,只有图片自动变换
想请教大虾们帮我改改,改到既能是图片自动变换,也能在点击按钮时使图片变化
代码如下:
<script type="text/javascript" language="javascript">
var pics = ["images/PS03.jpg", "images/PS04.jpg", "images/PS05.jpg", "images/PS06.jpg", "images/PS07.jpg", "images/PS08.jpg", "images/PS09.jpg", "images/PS10.jpg", "images/PS11.jpg", "images/PS12.jpg"];
var picIndex = 0;
function changePic_01() {
document.getElementById("Image_09").style.background= "url("+pics[picIndex]+")";
picIndex = (picIndex + 1) % pics.length;
} function inspect(){
var username = document.myForm.userName.value;
var password = document.myForm.passWord.value;
if(username.length < 1 )
{
alert("用户名非法,请检查!");
return false;
}
if(password.length < 1)
{
alert("密码非法,请检查!");
return false;
}
}
</script>
<script type="text/javascript">
<!--
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0; bannerAD[0]="images/PS03.jpg";
bannerADlink[0]="index.htm" bannerAD[1]="images/PS04.jpg";
bannerADlink[1]="index.htm" bannerAD[2]="images/PS05.jpg";
bannerADlink[2]="index.htm" bannerAD[3]="images/PS06.jpg";
bannerADlink[3]="index.htm" bannerAD[4]="images/PS07.jpg";
bannerADlink[4]="index.htm" bannerAD[5]="images/PS08.jpg";
bannerADlink[5]="index.htm"
/*图片可以增加*/
var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
} function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
} function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
} function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 6000);
} function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
} function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
} //-->
</script>
<div id="Image_09">
<a onmouseover="displayStatusMsg();return document.returnValue" href="javascript:jump2url()"><img src="images/Image_09.jpg" name="bannerADrotator" width="492px" height="281px" border="0" id="bannerADrotator" style="FILTER: revealTrans(duration=2,transition=40)" />
</a>
<script type="text/javascript">nextAd()</script>
</div>
<div id="Image_11">
<div id="div1101">
记忆
</div>
<div id="div1102" >
<input type="image" src="images/PS01.jpg" alt="点此换图" onClick="changePic_01();">
</div>
<div id="div1103" >
<input type="image" src="images/PS01.jpg" alt="点此换图" onClick="changePic_01();">
</div>
</div>
我搞了一个图片自动循环变换,另外加上了两个按钮,当点击按钮时,图片也会变换
但我把这两个搞在一起时,点击按钮变换图片不起作用了,只有图片自动变换
想请教大虾们帮我改改,改到既能是图片自动变换,也能在点击按钮时使图片变化
代码如下:
<script type="text/javascript" language="javascript">
var pics = ["images/PS03.jpg", "images/PS04.jpg", "images/PS05.jpg", "images/PS06.jpg", "images/PS07.jpg", "images/PS08.jpg", "images/PS09.jpg", "images/PS10.jpg", "images/PS11.jpg", "images/PS12.jpg"];
var picIndex = 0;
function changePic_01() {
document.getElementById("Image_09").style.background= "url("+pics[picIndex]+")";
picIndex = (picIndex + 1) % pics.length;
} function inspect(){
var username = document.myForm.userName.value;
var password = document.myForm.passWord.value;
if(username.length < 1 )
{
alert("用户名非法,请检查!");
return false;
}
if(password.length < 1)
{
alert("密码非法,请检查!");
return false;
}
}
</script>
<script type="text/javascript">
<!--
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0; bannerAD[0]="images/PS03.jpg";
bannerADlink[0]="index.htm" bannerAD[1]="images/PS04.jpg";
bannerADlink[1]="index.htm" bannerAD[2]="images/PS05.jpg";
bannerADlink[2]="index.htm" bannerAD[3]="images/PS06.jpg";
bannerADlink[3]="index.htm" bannerAD[4]="images/PS07.jpg";
bannerADlink[4]="index.htm" bannerAD[5]="images/PS08.jpg";
bannerADlink[5]="index.htm"
/*图片可以增加*/
var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
} function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
} function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
} function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 6000);
} function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
} function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
} //-->
</script>
<div id="Image_09">
<a onmouseover="displayStatusMsg();return document.returnValue" href="javascript:jump2url()"><img src="images/Image_09.jpg" name="bannerADrotator" width="492px" height="281px" border="0" id="bannerADrotator" style="FILTER: revealTrans(duration=2,transition=40)" />
</a>
<script type="text/javascript">nextAd()</script>
</div>
<div id="Image_11">
<div id="div1101">
记忆
</div>
<div id="div1102" >
<input type="image" src="images/PS01.jpg" alt="点此换图" onClick="changePic_01();">
</div>
<div id="div1103" >
<input type="image" src="images/PS01.jpg" alt="点此换图" onClick="changePic_01();">
</div>
</div>
var picCount = new Array();
for(i=1;i<=6;i++){
picCount.push(i);
}
var num = picCount[Math.floor(Math.random() * picCount.length)];
document.getElementById("img").innerHTML = "<img src='../images/" + num + ".jpg' />"+num;
}
window.onload=function(){
t=setInterval('rdmShowPic()',2000);
//clearInterval(t);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
div {
display:none;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var count = 0;
var variable = null;
var agvPictures = ["bigCry","cry","ku","smile"];
function move() {
if(variable == null) {
variable = count;
} else {
document.getElementById(agvPictures[variable]).style.display = "none";
}
document.getElementById(agvPictures[count]).style.display = "block";
variable = count;
count++;
if(count > agvPictures.length-1) {
count = 0;
}
setTimeout("move()",1000);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="move()">
<div id="bigCry"><img src="images/bigCry.gif"></div>
<div id="cry"><img src="images/cry.gif"></div>
<div id="ku"><img src="images/ku.gif"></div>
<div id="smile"><img src="images/smile.jpg"></div>
</BODY>
</HTML>
自动换图片