个人中心
gpt4 book ai didi

jquery - jQuery.scrollTo/jQuery.serialScroll 中的自动滚动非常疯狂

转载 作者：行者123 更新时间：2023-12-01 05:08:24 24 4
gpt4 key购买 nike

我使用以下教程为我的网站制作视差内容 slider :http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

我让它工作得很好，但想添加自动滚动功能。我通过添加 jQuery.serialScroll 并使用 setInterval 来做到这一点，但现在它的工作方式非常疯狂。我猜 slider 现在每 5 秒浏览 3 张幻灯片，而不是每 5 秒 1 张幻灯片。我不知道如何使其正常工作。

这是我的 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>

请问，有人知道如何让它按应有的方式工作(每 5 秒一张幻灯片)吗？

PS。请保持友善，我是这个领域的新手;)

最佳答案

我认为你的问题是你每 5 秒触发一次所有 3 个“幻灯片下一张”链接上的点击事件，因此尝试为每张幻灯片执行你的 onclick 代码会变得很糟糕。

你可以做的是这样的:

//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 秒就会触发移动到下一张幻灯片的链接上的点击事件(并非全部)。

希望这有帮助!

关于jquery - jQuery.scrollTo/jQuery.serialScroll 中的自动滚动非常疯狂，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3747292/

24 4 0
文章推荐： python - 使用python打开csv文件(IOError : [Errno 22] invalid mode ('r' ) or filename: "[' C:\\\\bigdata)
文章推荐： python - scrapy中通过回调函数传递元元素
文章推荐： python - 使用PhoneGap + Google App Engine上传和保存图像
文章推荐： python - 编写此正则表达式模式来检查这些短语的联合出现的更好、更简洁的方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com