Question

我对jQuery和Javascript很新！

我已经制作了一个图片库，您可以在其中点击下方的小缩略图，然后选择该图片并将其显示在更大的框中。

我要添加的是您点击的较大图像两侧的按钮，它会向左或向右变为图像。问题是，我只是弄清楚如何：P

（例如：https://imagizer.imageshack.us/v2/757x654q90/34/t4y1.png）

因此，这是点击图片的代码，它会更改为您点击的图片：

<script type="text/javascript">
    function changePic(img) {
        $("#gallery_img").hide();
        $("#gallery_img").attr ("src", img.src); 
        $("#gallery_img").fadeIn("slow")                
    }
</script>

这是HTML部分（只有图像按钮）：

            <div id="gallery_buttons">
                <img id="right" src="pics/right.png"></img>
                <img id="left" src="pics/left.png"></img>
            </div>

提前致谢！：）

Answer 1

Dunno如果你还在寻找解决方案，但这里有一个例子。

HTML

<div id="prev">Prev</div>
<div id="next">Next</div>
<ul>
    <li class="thumb"><img src="http://i.imgur.com/CdxLTkH.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/N4MgWLu.png"/></li>
    <li class="thumb selected"><img src="http://i.imgur.com/KJyey9r.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/8nqKP4I.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/vuvPGHg.png"/></li>
</ul>


<img id="gallery_img" src="#"/>

JQuery的

$("li").click(function(){

    var img = $(this).find('img').attr('src');
    $("ul").children().removeClass('selected');
    $(this).addClass('selected');
    $("#gallery_img").attr("src", img); 
});


$('#prev').click(function(){
    var prev = $(".selected").prev();
    var img = prev.find('img').attr('src');
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected');
    prev.addClass('selected'); 
});

$('#next').click(function(){
    var next = $(".selected").next();
    var img = next.find('img').attr('src');
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected');
    next.addClass('selected'); 
});

这是jsfiddle，您可以在其中查看该代码的示例。 http://jsfiddle.net/gdSD2/

显然它非常粗糙，可以清理但是有效。您还必须记住在用户到达列表末尾时的情况。如果没有下一个或上一个兄弟，请添加一些子句。

带有右侧和左侧按钮的图库

1 个答案: