Ползунок Jquery полной ширины с центрированным изображением - PullRequest
Новая
       0

Ползунок Jquery полной ширины с центрированным изображением

0 голосов
/ 14 марта 2012

Я пытался сделать один и искал в Google в течение нескольких часов, но я не могу найти то, что я после.

По сути, это слайдер изображений, который скользит в правой части экрана (независимо от разрешения)Идет в середину окна просмотра, затем выдвигается в крайнее левое положение.

Я не мастер jquery, поэтому я не могу завершить это сам, но у меня есть базовое понимание того, как это можно сделать.

пример: https://www.tumblr.com/

Кто-нибудь знает, есть ли что-то, что работает таким образом?

Спасибо

РЕДАКТИРОВАТЬ Я на полпути, этохотя не центрируется 

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

Ответы [ 3 ]

1 голос
/ 19 апреля 2012

Наконец мне удалось найти именно то, что вы хотите, и использовать это прямо сейчас;http://css -plus.com / examples / plugins / PlusSlider /

Полный рабочий пример вы можете увидеть, скачав слайдер с Github.

0 голосов
/ 14 марта 2012

Ваше описание звучит именно так, как я хотел достичь.

Я использовал Elastislide , и вроде как он соответствует моим потребностям, он может подойти и вам, а не программировать с нуля?

0 голосов
/ 14 марта 2012

Может быть, это поможет вам на вашем пути: 

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>

Посмотреть на JSFiddle

...