Question

<html>
<head>
    <link rel=stylesheet href="styles.css" type=css/text>
</head>


<style>
body{

background-color: #111;
background-attachment:fixed;
background-repeat: no-repeat;

background-position: center;
}

.right {
margin-top: 20px;
margin-right: 500px;
    position: absolute;
    right: 0px;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}
</style>

<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('pic1');
obj.className = 'hide';
var obj1=document.getElementById('pic2');
obj1.className = 'show';
}
</script>

<div>

<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="pic1.jpg"
bgimages[1]="pic2.jpg"
bgimages[2]="pic3.jpg"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1

var bgimagesTour=new Array()
bgimagesTour[0]="pic4.jpg"
bgimagesTour[1]="pic5.jpg"
bgimagesTour[2]="pic6.jpg"
//preload images
var pathToImgTour=new Array()
for (j=0;j<bgimagesTour.length;j++){
pathToImgTour[j]=new Image()
pathToImgTour[j].src=bgimagesTour[j]
}
var incr=-1
</script>
</div>

<div class="show" id="pic1"  >ofjvhkjnvf
<script language="JavaScript1.2">

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",3000)')

</script>

</div>

<div class="hide" id="pic2" >kflaksjfvnksfvn
<script language="JavaScript1.2">

function bgSlideTour(){
if (incr<bgimagesTour.length-1)
incr++
else
incr=0
document.body.background=pathToImgTour[incr].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlideTour()",3000)')

</script>

</div>

<font color="white">
<div class="right" >
<u><a href="#" onClick="showImg();">Tourism</a></u>&nbsp<u><a>Festival</a></u>&nbsp<u><a>Food</a></u>&nbsp<u><a>Music</a></u>&nbsp<u><a>Blog</a></u>&nbsp<u><a>Suggestion</a></u></div>

在上面的代码中，我有2个幻灯片和两个不同的功能。如果我尝试为单个图像运行相同的代码，它将起作用。例如：

<li><a href="#1" onclick = "showImg()" value= "Picture1" title="Home">Home</a></li>
<img id="Picture1" src="/home/sharvil/Project/new/map.gif" class="show">

它也适用于在第一张幻灯片的标签之后编写的任何内容，用于更改在第二张幻灯片的标签之后写入的文本。虽然，它似乎并没有为各自职位的javascript工作。请帮忙。

Answer 1

您的showImg功能正在做什么，它将始终隐藏您的pic1标识符（ID）div，并始终显示pic2 ID div。

此外，您还设置了pic1 ID div来显示，并在页面加载时隐藏pic2 ID div。因此，您一次只能看到一张幻灯片。

如何在后台单击同一页面上的链接时插入新幻灯片？

1 个答案: