<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> <u><a>Festival</a></u> <u><a>Food</a></u> <u><a>Music</a></u> <u><a>Blog</a></u> <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。请帮忙。
最佳答案
您的 showImg 函数所做的是，它将始终隐藏您的 pic1 标识符 (ID) div，并始终显示 pic2 ID div .
您还设置了 pic1 ID div 以在页面加载时显示，并将 pic2 ID div 设置为隐藏。因此您一次只能看到一张幻灯片。
关于javascript - 如何在后台单击同一页面上的链接时插入新的幻灯片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32846593/