0

我目前正在制作一个 J 查询滑块，它的工作原理是，当您单击下一步时，它将从右向左滑动，当您单击上一个时，它将从左向右滑动。图像受到限制，因此它将开始以循环方式显示前一个图像。问题是单击时的上一个和下一个按钮无法正常工作。我无法找到最好的解决方案。任何人都可以建议我写它的最佳方式是什么。或者是否有任何有效的技术可以在不使用任何滑块插件的情况下制作这样的滑块。

jQuery 代码

$(document).ready(function(){    
var galW =  $('#gallery').width();  
var imgN = $('#slider img').length;
$("#slider").width((galW/6)*imgN);
$('#next').click(function(){    
    var first = $("#slider img").first();
    var last = $("#slider img").last();
    first.stop().animate({marginLeft : -150},1500,function(){
first.detach().insertAfter(last).css('marginLeft','0px');
});
});

$('#prev').click(function(){
        var first = $("#slider img").first();
    var last = $("#slider img").last();
    last.detach().insertBefore(first).css('marginLeft','-150px');
    first.stop().animate({marginLeft : 0},1500);
});
});

HTML 代码

<div id="gallery">
            <div id="gallery_overflow">
                <div id="slider">
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>
                                    <img src="#" width="150px" height="50px"/>

                </div>
            </div>
            <div id="prev"><img src="left.png" width="40px" height="40px"/></div>
            <div id="next"><img src="right.png" width="40px" height="40px"/></div>
        </div>

图片在#Places..

4

1 回答 1

0

通过对代码进行一些修改，您可以使其工作如下（以支持图像上的链接，请参见下面的EDIT部分），

CSS

#gallery{
    overflow:hidden;
}
#slider {
    white-space:nowrap;
}
#slider img {
     margin-left:5px; 
}

JS

$(document).ready(function () {

    var galW = $('#gallery').width();
    var imgN = $('#slider img').length;
    var sliding = false;
    $("#slider").width((galW / 6) * imgN);
    $('#next').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider img").first();
        var last = $("#slider img").last();
        var defaultMarginLeft = first.css("margin-left");
        first.animate({
            marginLeft: (-1*first.width())
        }, 1500, function () {
            first.detach().insertAfter(last).css('marginLeft', defaultMarginLeft);
            sliding = false;
        });
    });

    $('#prev').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider img").first();
        var last = $("#slider img").last();
        var defaultMarginLeft = first.css("margin-left");
        last.detach().insertBefore(first).css('marginLeft', (-1*first.width()));
        first = $("#slider img").first();
        first.animate({
            marginLeft: defaultMarginLeft
        }, 1500,function(){sliding=false;});
    });

});

http://jsfiddle.net/2dwsW/

编辑

另一种使用 span 元素作为占位符的实现（实际上它是在选择器中使用的类占位符，因此可以使用任何内联块元素来代替具有此类名称的 span）以正确支持图像上的链接并启用包含所需的任何元素。

CSS

#gallery{
    overflow:hidden;
}
#slider {
    white-space:nowrap;
}
#slider .placeholder {
     margin-left:5px; 
}

JS

$(document).ready(function () {

    var galW = $('#gallery').width();
    var imgN = $('#slider .placeholder').length;
    var sliding = false;
    $("#slider").width((galW / 6) * imgN);
    $('#next').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider .placeholder").first();
        var last = $("#slider .placeholder").last();
        var defaultMarginLeft = first.css("margin-left");
        first.animate({
            marginLeft: (-1*first.width())
        }, 1500, function () {
            first.detach().insertAfter(last).css('marginLeft', defaultMarginLeft);
            sliding = false;
        });
    });

    $('#prev').click(function () {
        if(sliding)return;
        sliding = true;
        var first = $("#slider .placeholder").first();
        var last = $("#slider .placeholder").last();
        var defaultMarginLeft = first.css("margin-left");
        last.detach().insertBefore(first).css('marginLeft', (-1*first.width()));
        first = $("#slider .placeholder").first();
        first.animate({
            marginLeft: defaultMarginLeft
        }, 1500,function(){sliding=false;});
    });

});

HTML

<div id="gallery">
    <div id="gallery_overflow">
        <div id="slider">
            <span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span><span class="placeholder"><a href=#><img src="http://placehold.it/150x50" /></a></span>
        </div>
    </div>
    <div id="prev">PREV</div>
    <div id="next">NEXT</div>
</div>

http://jsfiddle.net/2dwsW/1/

于 2013-10-20T13:18:19.897 回答