Question

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

阵列：

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>

Answer 1

获取被点击的'anchor的父'li'的索引，让它为indexOfLi，使用jquery index（）或写一个javascript函数来计算索引。

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

在jQuery中，绑定click事件

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

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

要使on function起作用，你必须使用~jQuery 1.7.2

用于早期版本

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

从jQuery数组中提取的链接列表

1 个答案: