图像滑块的下一个按钮不起作用。 [JQUERY]

时间:2016-03-28 11:31:15

标签: jquery html

左键工作正常,但当我点击右键时,所有项目都淡出,没有任何淡入淡出。我怎样才能解决我的问题?

JQUERY

var LastItem = $("ul#rew > li:last-child").index();
var FirstItem = $("ul#rew > li:first-child").index();
$(".gallery_items i#sag").click(function() {
    $("ul#rew > li").children("img").hide();
    index++;
    if(index == LastItem) { index = FirstItem; }
    $("ul#rew > li").eq(index).children("img").fadeIn(300);
});

$(".gallery_items i#sol").click(function() {
    $("ul#rew > li").children("img").hide();
    index--;
    $("ul#rew > li").eq(index).children("img").fadeIn(300);
    if(index==FirstItem) {index=LastItem;}
});

HTML

<ul id="rew" class="gallery_content">

    <li>
        <div class="gallery_image" style="background-image:url(IMG/gallery/thumb/rew2010_1.jpg);"><span>2010</span></div>
        <img src="IMG/gallery/rew2010_1.jpg" alt="REW" style="display: none;">
    </li>

    <li>
        <div class="gallery_image" style="background-image:url(IMG/gallery/thumb/rew2010_2.jpg);"><span>2010</span></div>
        <img src="IMG/gallery/rew2010_2.jpg" alt="REW" style="display: none;">
    </li>

    ...................

</ul>

1 个答案:

答案 0 :(得分:0)

        var index;
        var LastItem;
        var FirstItem;

        $("ul#rew > li").click(function() {
            $("ul#rew > li > img").hide();
            $(this).children("img").fadeIn(300);
            $("#gallery_image_background").fadeIn(300);
            $(".gallery_items > i").fadeIn(300);
            index = $(this).index();
            LastItem = $("ul#rew > li:last-child").index();
            FirstItem = $("ul#rew > li:first-child").index();
        });