Question

我一直试图制作一个并搜索谷歌几个小时，但我找不到后来的东西。

基本上它是一个从屏幕最右侧滑入的图像滑块（无论分辨率如何）都会移到视口的中间，然后滑出最左边。

我不是一个jquery向导，所以我不能自己完成这个，但我基本了解如何做到这一点。

示例：https://www.tumblr.com/

Any1知道那里有什么东西能以这种方式运作吗？

由于

修改我在那里的一半，它不在中心

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#scroller .item").css("width", $(document).width());
        $("#scroller").scrollable({
            circular: true,
            speed: 1200
        }).autoscroll({ interval: 4000, autopause: false }).navigator();
        api = $('#scroller').data("scrollable");
        $(window).resize(function () {
            if ($('#scroller .items:animated').length == 0) {
                $("#scroller .item").css("width", $(document).width());
                nleft = $(document).width() * (api.getIndex() + 1);
                $("#scroller .items").css("left", "-" + nleft + "px");
            }
        });
        api.onSeek(function (event) {
            $("#scroller .item").css("width", $(document).width());
            nleft = $(document).width() * (api.getIndex() + 1);
            $("#scroller .items").css("left", "-" + nleft + "px");
        });
    });
</script>

HTML / CSS

            <div id="Slider">
            <div id="area">
                <div id="scroller">
                    <div class="items">
                        <div class="item">
                            <a href="Default.aspx" class="image"><img src="Images/Slider/1_1000x350.png" alt="" width="1140" height="350" title="" /></a>
                        </div>
                        <div class="item">
                            <a href="Default.aspx" class="image"><img src="Images/Slider/2_1000x350.png" alt="" width="1140" height="350" title="" /></a>
                        </div>
                        <div class="item">
                            <a href="Default.aspx" class="image"><img src="Images/Slider/3_1000x350.png" alt="" width="1140" height="350" title="" /></a>
                        </div>
                    </div>
                </div>
            </div>
    </div>




 #Slider
{
    left:0;
    width:100%;
    height:420px;
    background-color:white;
    position:absolute;
    z-index:1;
}

#scroller 
{
    z-index:1;
    position:relative;
    overflow:hidden;
    height: 420px;
    width: 100%;
    margin: 0 0 0 0;
}

#scroller .items 
{
    z-index:1;
    position:absolute;
    width:20000em;
}

#scroller .items .item {
    width: 1140px;
    height: 420px;
    float:left;
}

Answer 1

最后，我已经设法找到你想要的东西并立即使用它; http://css-plus.com/examples/plugins/PlusSlider/

从Github下载滑块时，您可以看到完整的工作示例。

Answer 2

您的描述听起来正是我想要实现的目标。

我使用Elastislide并使其符合我的需要，它也适合你，而不是从头开始编码？

Answer 3

也许这可以帮助你：

window_width = $(document).width();
window_width = window_width / 2;
element_width = $('span').width();
element_width = element_width / 2;
the_center = window_width - element_width;
$('span').animate({
  left: the_center
}, 2000).delay(1000).animate({
  left: '0'
}, 2000);

span {
  display: block;
  height: 20px;
  width: 20px;
  background-color: red;
  position: absolute;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<span>&nbsp;</span>

View on JSFiddle

Jquery全宽度滑块，带居中图像

3 个答案: