0

我正在使用具有下一个/上一个功能的图像数组来浏览图像。我还希望有一个单独图像的无序列表，以便用户可以单击特定图像，但我不确定如何实现它。我可以直接链接图像，但我不确定如何在单击下一个/上一个时让它们显示在其他图像的位置。

大批：

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();">&laquo; 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 &raquo;</a></p>

<div class="clear"></div>
</div>
</div>

<div id="container">

<div id="image">
<img name="imgSrc" id="imgSrc" />
</div>

</div>
4

1 回答 1

0

获取点击的'锚的父'li'的索引让它成为 indexOfLi ，使用 jquery index() 或编写一个javascript函数来计算索引。

function goToImg(index){
    document.imgSrc.src = myImgSrc + myImg[indexOfLi] + myImgEnd;
    }

在jQuery中，绑定点击事件

$(document).on('click','#list li a',function(){
    goToImg($(this).parent().index());
    return false; // to prevent default action
    });

请查看使用 javascript 和使用 jQuery 的绑定事件。

要使 on 函数起作用，您必须使用 ~ jQuery 1.7.2

对于早期版本

$('#list li a').click(function(){
    goToImg($(this).parent().index());
    return false; // to prevent default action
    });
于 2012-06-22T17:40:10.830 回答