带有下一个和上一个链接的幻灯片不起作用（图片来自 db）

Question

我正在创建一个简单的幻灯片。来自 db 的 4 个图像由 php 存储在一个名为 home_gallery_thumb 的 div 中，具有相对位置，图像被包裹在锚标签内，试图用下一个和上一个按钮更改它们，但它跳转到第三个图像，然后一切都完全停止，尽管它没有任何工作如果这些图像不是来自数据库的静态图像，则问题是这里的 div 获取图像

<div class="home_gallery_thumb" style="background-color:#006; position:relative;">
<?php
require('_req/base.php');
$getImgsQ = "select Photo_Name from photos order by Photo_ID DESC limit 4";
$getImgsR = mysql_query($getImgsQ);
while($galleryRow = mysql_fetch_array($getImgsR)){
?> <a class="galleryLink" style="position:absolute;" href="products_large/<?php echo    $galleryRow['Photo_Name']; ?>"><img src="products_thumb/<?php echo $galleryRow['Photo_Name']; ?>" /></a> <?php  
}
mysql_close($connect);
?>

所以现在我有 div 内的图像链接，这是 jq 代码

$(".home_gallery_thumb a.galleryLink").css("display","none");
$("a.galleryLink:first").fadeIn(500);
var allImgs = $(".home_gallery_thumb a").length;
$(".next").click(function(){
    var curImg = $("a.galleryLink:visible").index();
    var nxtImg = curImg+1 ;
    if(nxtImg == allImgs) { nxtImg = 0; }
    $("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
        $("a.galleryLink:eq("+nxtImg+")").fadeIn(800);
    });
});
$(".previous").click(function(){
    var curImg = $("a.galleryLink:visible").index();
    var prevImg = curImg-1 ;
    if(prevImg == -1) { prevImg = allImgs-1; }
    $("a.galleryLink:eq("+curImg+")").fadeOut(800,function(){
        $("a.galleryLink:eq("+prevImg+")").fadeIn(800);
    });
});

这段代码在 document.ready 里面，这就是我通过 firebug 注意到的

首先：图像加载和所有其他链接是：显示：无 单击下一个按钮后，第一个链接没有显示：无样式，它跳转到第三个链接使其可见，然后一切都停止了。而上一个按钮根本不存在，因为它根本不存在

Answer 1

试试这个，如果不行，请提供幻灯片的链接

$("a.galleryLink").hide();
$("a.galleryLink:first-child").fadeIn(500);
$(".next").click(function(){
    var curImg = $("a.galleryLink:visible");
    var nxtImg = curImg.next();
    if(!nxtImg.length) { nxtImg = $("a.galleryLink:first-child"); }
    curImg.fadeOut(800,function(){
        nxtImg.fadeIn();
    });
});
$(".previous").click(function(){
    var curImg = $("a.galleryLink:visible");
    var prvImg = curImg.prev();
    if(!prvImg.length) { prvImg = $("a.galleryLink:last-child"); }
    curImg.fadeOut(800,function(){
        prvImg.fadeIn();
    });
});