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関数を機能させるには、〜jQuery1.7.2を使用する必要があります

以前のバージョンの場合

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