我正在使用具有下一个/上一个功能的图像数组来浏览图像。我还希望有一个单独图像的无序列表,以便用户可以单击特定图像,但我不确定如何实现它。我可以直接链接图像,但我不确定如何在单击下一个/上一个时让它们显示在其他图像的位置。
大批:
var myImg= new Array()
myImg[0]= "Home";
myImg[1]= "Solutions";
myImg[2]= "About";
myImg[3]= "Careers";
myImg[4]= "Contact";
myImgSrc = "images/";
myImgEnd = ".png"
var i = 0;
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
function next(){
if(i>3){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
window.onload=loadImg;
标记:
<div id="top">
<div class="box">
<p class="l"><a href="#" onClick="prev();">« Previous Image</a></p>
<ul id="list">
<li><a href="#">Home</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p class="r"><a href="#" onClick="next();">Next Image »</a></p>
<div class="clear"></div>
</div>
</div>
<div id="container">
<div id="image">
<img name="imgSrc" id="imgSrc" />
</div>
</div>