Блог

Главная - Вопросы по программированию - Ошибка слайдера Jquery

Ошибка слайдера Jquery

#javascript #jquery #event-handling #slideshow

#javascript #jquery #обработка событий #слайд-шоу

Вопрос:

Итак, у меня запущен мой скрипт (вы можете использовать примеры ссылок / изображений для тестирования), но у меня проблема. После подсчета длины моих изображений кажется, что мой «промежуточный период» перед запуском / повторением слайдера составляет примерно в три раза больше длины изображений. Мы можем протестировать это, используя примеры URL-адресов.

 <a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/ConanObrien.jpg' title="Conan O'Brien: TV host, comedian, writer, producer and performer."><img class='logo' alt="TV host, comedian, writer, producer and performer." id='conanobrien' src='http://www.universallifechurchministers.org/images/conan-obrien-sm.jpg' /><div class='long'>[.....]</div></a>
<a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/RobDyrdek.jpg' title="Rob Dyrdek: Skateboarding Entrepreneur, Fantasy Factory on MTV."><img class='logo' alt="Skateboarding Entrepreneur, Fantasy Factory on MTV." id='robdyrdek' src='http://www.universallifechurchministers.org/images/rob-drydek-sm.jpg' /><div class='long'>[.....]</div></a>
<a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/Glann-Beck.jpg' title="Glenn Beck: Talk Radio Host"><img class='logo' alt="Talk Radio Host" id='glennbeck' src='http://www.universallifechurchministers.org/images/image1.jpg' /><div class='long'>[.....]</div></a>
<a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/Mel-Blanc.jpg' title="Mel Blanc: Voice Actor"><img class='logo' alt="Voice Actor" id='melblanc' src='http://www.universallifechurchministers.org/images/image2.jpg' /><div class='long'>[.....]</div></a>

слева: -632.914пикселей, похоже, на чем останавливается мой слайдер, прежде чем он снова начнет скользить.
Я бы хотел, чтобы он сразу же запустился снова в конце последнего изображения,
но не могу понять, что мешает ему это сделать?

[Вы можете увидеть, как это работает здесь] и вот полный исходный код

 <!DOCTYPE html>
<html>
  <head>
    <style>

        /* js-disabled class - set image sizes so they all fit in the viewer */
        .js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
        .wrapper {padding: 0 5px;}
        .long { display:none; }

        #outerContainer { width:542px; height:202px; margin:auto; position:relative; margin:220px auto; }
        #imageScroller { width:675px; height:202px; position:relative; background: url(filmstrip_right.png) no-repeat; }
            #viewer {
                background-color: #000000;
                height: 72px;
                margin: auto;
                overflow: hidden;
                position: relative;
                right: 10px;
                top: 51px;
                width: 540px;
            }
        #imageScroller a:active, #imageScroller a:visited { color:#000000; }
        #imageScroller a img { border:0; }
            #controls {
                background: url("images/controlsBG.png") no-repeat scroll 0 0 transparent;
                height: 47px;
                left: 11px;
                position: absolute;
                top: -7px;
                width: 534px;
                z-index: 10;
            }

            #cover {
                background: url("images/cover.png") no-repeat scroll 0 0 transparent;
                height: 71px;
                left: 57px;
                position: absolute;
                top: 51px;
                width: 38px;
                z-index: 999;
            }
        #controls a { width:37px; height:35px; position:absolute; top:3px; }
        #controls a:active, #controls a:visited { color:#0d0d0d; }
        #title { color:#000; font-family:arial; font-size:13px; font-weight:bold; width:100%; text-align:center; margin-top:13px; }

    </style>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>[....]</title>
  </head>
  <body>
        <div id="outerContainer">
            <div id="imageScroller">
                <div id="cover"></div>
                <div id="viewer" class="js-disabled">

                    <?php   include('famous/class/scraper.php');
                            $scrape = new Scraper('http://www.universallifechurchministers.org');
                            $scrape = (array)$scrape;

                        foreach($scrape as $multi) {
                         if(is_array($multi)) {

                            $holder = ''; 
                            foreach($multi as $single) {

                                foreach($single as $k=>$v)  { 
                                    switch($k) {
                                        case 'fimg': $fimg = $v; break;
                                        case 'simg': $simg = $v; break;
                                        case 'name': $name = $v; break;
                                        case 'note': $note = $v; break;
                                        case 'long': $long = $v; break; 
                                    }
                                }

                                    $id = strtolower( //clean
                                           str_replace("'",'',
                                           str_replace(' ','',$name)
                                          ));

                                /* sample output:   <a class='wrapper' href='[uri]/*-lrg.jpg' 
                                 *                     title='[note]'>
                                 *
                                 *                  <img class='logo' alt='[note]' id='[cleanName]' 
                                 *                       src='[uri]/*-sm.jpg' /></a>
                                 *
                                 *                  [....repeat....]
                                 */

                                $holder .= "<a class='wrapper' href='" . $fimg . "' title=""
                                            . $name . ': ' . $note. ""><img class='logo' alt="" . $note . "" id='" 
                                            . $id . "' src='" 
                                            . $simg . "' /><div class='long'>"
                                            . $long . "</div></a>";
                            }
                         }
                        }

                        #echo $holder;

                    ?>

                    <!--// test-data //-->
                    <a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/ConanObrien.jpg' title="Conan O'Brien: TV host, comedian, writer, producer and performer."><img class='logo' alt="TV host, comedian, writer, producer and performer." id='conanobrien' src='http://www.universallifechurchministers.org/images/conan-obrien-sm.jpg' /><div class='long'>[.....]</div></a>
                    <a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/RobDyrdek.jpg' title="Rob Dyrdek: Skateboarding Entrepreneur, Fantasy Factory on MTV."><img class='logo' alt="Skateboarding Entrepreneur, Fantasy Factory on MTV." id='robdyrdek' src='http://www.universallifechurchministers.org/images/rob-drydek-sm.jpg' /><div class='long'>[.....]</div></a>
                    <a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/Glann-Beck.jpg' title="Glenn Beck: Talk Radio Host"><img class='logo' alt="Talk Radio Host" id='glennbeck' src='http://www.universallifechurchministers.org/images/image1.jpg' /><div class='long'>[.....]</div></a>
                    <a class='wrapper' href='http://www.universallifechurchministers.org/images/big_image/Mel-Blanc.jpg' title="Mel Blanc: Voice Actor"><img class='logo' alt="Voice Actor" id='melblanc' src='http://www.universallifechurchministers.org/images/image2.jpg' /><div class='long'>[.....]</div></a>

                </div>
            </div>

        </div>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(function() {

              //remove js-disabled class
                $("#viewer").removeClass("js-disabled");

              //create new container for images
                $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");

                //add images to container
                $(".wrapper").each(function() {
                    $(this).appendTo("div#container");
                });

                //work out duration of anim based on number of images (1 second for each image)
                var duration = $(".wrapper").length * 2000;

                //store speed for later (distance / time)
                var speed = (parseInt($("div#container").width())   parseInt($("div#viewer").width())) / duration;

                //set direction
                var direction = "rtl";

                //set initial position and class based on direction
                (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;

                //animator function
                var animator = function(el, time, dir) {

                    //which direction to scroll
                    if(dir == "rtl") {

                      //add direction class
                        el.removeClass("ltr").addClass("rtl");

                        //animate the el
                        el.animate({ left:"-"   el.width()   "px" }, time, "linear", function() {

                            //reset container position
                            $(this).css({ left:$("div#imageScroller").width(), right:"" });

                            //restart animation
                            animator($(this), duration, "rtl");

                            //hide controls if visible
                            ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            

                        });
                    } else {

                      //add direction class
                        el.removeClass("rtl").addClass("ltr");

                        //animate the el
                        el.animate({ left:$("div#viewer").width()   "px" }, time, "linear", function() {

                            //reset container position
                            $(this).css({ left:0 - $("div#container").width() });

                            //restart animation
                            animator($(this), duration, "ltr");

                            //hide controls if visible
                            ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            
                        });
                    }
                }

                //start anim
                animator($("div#container"), duration, direction);

                //pause on mouseover
                $("a.wrapper").live("mouseover", function() {

                    //stop anim
                    $("div#container").stop(true);

                    //show controls
                    ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
                    ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
                    ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;

                    //variable to hold trigger element
                    var title = $(this).attr("title");

                    //add p if doesn't exist, update it if it does
                    ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
                });

                //restart on mouseout
                $("a.wrapper").live("mouseout", function(e) {

                    //hide controls if not hovering on them
                    (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;

                    //work out total travel distance
                    var totalDistance = parseInt($("div#container").width())   parseInt($("div#viewer").width());

                    //work out distance left to travel
                    var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left"))   parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;

                    //new duration is distance left / speed)
                    var newDuration = distanceLeft / speed;

                    //restart anim
                    animator($("div#container"), newDuration, $("div#container").attr("class"));

                });

                //handler for ltr button
                $("#ltr").live("click", function() {

                    //stop anim
                    $("div#container").stop(true);

                    //swap class names
                    $("div#container").removeClass("rtl").addClass("ltr");

                    //work out total travel distance
                    var totalDistance = parseInt($("div#container").width())   parseInt($("div#viewer").width());

                    //work out remaining distance
                    var distanceLeft = totalDistance - (parseInt($("div#container").css("left"))   parseInt($("div#container").width()));

                    //new duration is distance left / speed)
                    var newDuration = distanceLeft / speed;

                    //restart anim
                    animator($("div#container"), newDuration, "ltr");
                });

                //handler for rtl button
                $("#rtl").live("click", function() {

                    //stop anim
                    $("div#container").stop(true);

                    //swap class names
                    $("div#container").removeClass("ltr").addClass("rtl");

                    //work out total travel distance
                    var totalDistance = parseInt($("div#container").width())   parseInt($("div#viewer").width());

                    //work out remaining distance
                    var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

                    //new duration is distance left / speed)
                    var newDuration = distanceLeft / speed;

                    //restart anim
                    animator($("div#container"), newDuration, "rtl");
                });
            });
        </script>
  </body>
</html>

Ответ №1:

Эта строка в логике «rtl» сообщает элементу продолжать скользить до -632px (ширина элемента).

     //animate the el
    el.animate({
        left: "-"   el.width()   "px"
    }, time, "linear", function() {

Уберите «px» и вместо этого используйте ‘-=’!

     //animate the el
    el.animate({
        left: "-="   el.width()
    }, time, "linear", function() {

Я не совсем понимаю, почему вы используете этот подход. Почему бы просто не использовать это, что бы сдвигать его до тех пор, пока он не покинет «viewer»?

     //animate the el
    el.animate({
        left: ($('div#viewer').offset().left - $('div#container').outerWidth())   "px"
    }, time, "linear", function() {

Кроме того, почему #container такой широкий? Почему бы просто не оставить ширину содержимого? Действительно ли он должен быть таким же широким, как .wrapper?

Комментарии:

1. Я попытался вставить ваш код, если вы посмотрите до конца, он сделает то же самое, утроит длину. themonastery.org/jd/slider.php #

2. утроить длину чего? Он перемещает ширину #container, которая составляет 630 пикселей в ширину?

3. Следите за этим теперь, когда я снял скрытый, он все равно не остановится, когда последний уйдет, или, что еще лучше, просто запустите себя по непрерывному кругу. Я попытался изменить ширину контейнера с действительно неприятными результатами.

4. Да, теперь я вижу, что это не утроенная длина, это просто перемещение общей ширины экрана перед перезапуском, когда я хочу, чтобы он перемещал только длину viewer плюс длину слайд-шоу.

5. Если вы хотите, чтобы он выполнялся по непрерывному кругу, вам нужно клонировать содержимое, таким образом, один может отображаться на экране справа, а другой убегает влево … когда левый исчезает из поля зрения, вы переключаете его вправо, и они меняются ролями.

Ответ №2:

Вот пример непрерывной циклической прокрутки. Я думаю, вы можете почерпнуть из него идеи или просто использовать его в качестве отправной точки; он решает все проблемы, с которыми вы сталкиваетесь, насколько я их понимаю. Надеюсь, это поможет!

http://jsfiddle.net/katowulf/FeRUd/11/