Question

我正在创建一个简单的幻灯片。来自db的4个图像存储在一个名为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注意到的

首先：图片加载，所有其他链接是：display：none 点击下一个按钮后，第一个链接没有显示：none样式，它跳转到第三个链接，使其可见，然后一切都停止。而前一个按钮什么都不做，因为它不存在

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();
    });
});

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

1 个答案: