Автоматическая прокрутка в jQuery.scrollTo / jQuery.serialScroll работает как сумасшедшая - PullRequest
Новая
       50

Автоматическая прокрутка в jQuery.scrollTo / jQuery.serialScroll работает как сумасшедшая

2 голосов
/ 20 сентября 2010

Я использовал следующий учебник для создания слайдера содержания параллакса для моего веб-сайта: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

Я работал хорошо, но хотел добавить функцию автоматической прокрутки.Я сделал это, добавив jQuery.serialScroll и используя setInterval, но теперь он работает как сумасшедший.Полагаю, что теперь слайдер просматривает каждые 3 слайда каждые 5 секунд вместо 1 слайда в 5 секунд.Я понятия не имею, как заставить его работать должным образом.

Вот часть моего HTML: 

<body>
<div id="header">
    <h1 id="logo">Testing slider</h1>
</div>
<!-- end logo -->

<div id="slider">
    <div id="background">
        <div id="bg">
        </div>
    </div>
    <!-- end slide background -->

    <div id="wrapper">
        <ul id="mask">
            <li id="box1" class="box">
                <a name="box1"><img src="images/slide1.png"></a>
                <div class="content">
                    <div class="inner">
                    </div>
                </div>
            </li>
            <!-- end box1 -->

            <li id="box2" class="box">
                <a name="box2"><img src="images/slide2.png"></a>
                <div class="content">
                    <div class="inner">
                    </div>
                </div>
            </li>
            <!-- end box2 -->

            <li id="box3" class="box">
                <a name="box3"><img src="images/slide3.png"></a>
                <div class="content">
                    <div class="inner">
                    </div>
                </div>
            </li>
            <!-- end box3 -->

        </ul>
        <!-- end mask -->

    </div>
    <!-- end wrapper -->

</div>
<!-- end Slider -->

<div id="content">
    <div id="menu">
        <ul id="menuitem">
            <li><a href="#box1" class="slide_next"></a></li>
            <li><a href="#box2" class="slide_next"></a></li>
            <li><a href="#box3" class="slide_next"></a></li>
        </ul>
    </div>
    <!-- end menu -->

</div>
<!-- end content -->

А вот тревожный код JS: 

    <script type="text/javascript">
$(document).ready(function() {  
    $('a.slide_next').click(function () {  
        $('#wrapper').scrollTo($(this).attr('href'), 800);
        setPosition($(this).attr('href'), '#background', '0px', '50px', '100px')
        $('a.slide_next').removeClass('selected');  
        $(this).addClass('selected');
        return false;  
    }); 
});

        setInterval(function() {$('a.slide_next').click()}, 5000);  

function setPosition(check, div, p1, p2, p3) {
if(check==='#box1')
    {           $(div).scrollTo(p1, 800);       }
else if(check==='#box2')
    {           $(div).scrollTo(p2, 800);       }
else
    {           $(div).scrollTo(p3, 800);       }
};  



</script>

Пожалуйста, у кого-нибудь есть идеи, как заставить его работать так, как оно должно быть (1 слайд каждые 5 секунд)?

PS.Пожалуйста, будь мил, я новичок в этой области;)

1 Ответ

1 голос
/ 28 сентября 2010

Я думаю, что ваша проблема в том, что вы запускаете событие нажатия на ВСЕ 3 из ваших ссылок «слайд следующий» каждые 5 секунд, так что это происходит неожиданно, пытаясь выполнить ваш код клика для каждого слайда.

То, что вы можете сделать, выглядит примерно так: 

//set a global var to keep track of the slide we're on
window.slide = 1
function nextSlide(){
   //increase window.slide by 1 (to go to the next slide), 
   //or if it is 3 return to the first slide
   window.slide == 3 ? window.slide = 1 : window.slide++;
   //trigger click event on the NEXT slide only
   $('a[href=#box'+window.slide+']').click()
}
setInterval(nextSlide,5000);

Таким образом, каждые 5 секунд срабатывает событие щелчка по ссылке для перехода к следующему слайду (и не ко всем).

Надеюсь, это поможет!

...