0
Ich möchte eine einfache Fotogalerie-Funktion machen. Es gibt jedoch ein seltsames Verhalten von JQuery's click().JQuery Klick() seltsames Verhalten
Nachdem der Benutzer auf die Vorwärts-Schaltfläche geklickt hat, sollten 10 weitere Bilder angezeigt werden. Nachdem der Benutzer auf die Zurück-Schaltfläche geklickt hat, sollten 10 vorherige Bilder angezeigt werden.
Im folgenden Code sind 4 Zeilen, die in meinem Code funktioniert, kommentiert. Ich erwarte, dass JQuery click() dasselbe tun sollte wie die kommentierten Zeilen, aber das tut es nicht. Code mit JQuery click() funktioniert nicht, nachdem ich mehrmals rückwärts und vorwärts geklickt habe. Ich möchte fragen, wo das Problem des Codes ist. Vielen Dank.
<script type="text/javascript">
$(document).ready(function() {
var numImages = imagesObj.images.image.length;
var imagePath = "images/";
var currentIndex = 0;
function changeImageList(startIndex){
var imageIndex = 0;
$("#imagesList img").css("display","none");
for (var i=startIndex; i<numImages && i<startIndex + 10; i++)
{
var imageId = "image" + imageIndex;
var image = imagesObj.images.image[i];
$("#" + imageId).attr("src",imagePath + image.imageurl).css("display","");
imageIndex++;
}
currentIndex = startIndex;
if (numImages > currentIndex+10){
$('#forward').css("cursor","pointer");
//document.getElementById("forward").onclick = function(){changeImageList(currentIndex+10);};
$('#forward').click(function(){ changeImageList(currentIndex+10);});
}else{
$('#forward').css("cursor","default");
//document.getElementById("forward").onclick = function(){};
$('#forward').click(function(){});
}
if (currentIndex < 10){
$('#backward').css("cursor","default");
//document.getElementById("backward").onclick = function(){};
$('#backward').click(function(){});
}else{
$('#backward').css("cursor","pointer");
//document.getElementById("backward").onclick = function(){changeImageList(currentIndex-10);};
$('#backward').click(function(){changeImageList(currentIndex-10);});
}
}
changeImageList(0);
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img id="backward" src="images/lft_arrow.gif" alt="" width="39" height="44" /></td>
<td id="imagesList" align="center">
<img id="image0" width="77" style="display:none; cursor:pointer" />
<img id="image1" width="77" style="display:none; cursor:pointer" />
<img id="image2" width="77" style="display:none; cursor:pointer" />
<img id="image3" width="77" style="display:none; cursor:pointer" />
<img id="image4" width="77" style="display:none; cursor:pointer" />
<img id="image5" width="77" style="display:none; cursor:pointer" />
<img id="image6" width="77" style="display:none; cursor:pointer" />
<img id="image7" width="77" style="display:none; cursor:pointer" />
<img id="image8" width="77" style="display:none; cursor:pointer" />
<img id="image9" width="77" style="display:none; cursor:pointer" />
</td>
<td align="center"><img id="forward" src="images/rgt_arrow.gif" alt="" width="39" height="44" /></td>
</tr>
</table>
</body>