Question

我添加了此滚动功能，没有插件可在单个页面上向上和向下滚动大图像库。我的代码不是很优雅，但滚动基本上会在点击箭头的动作中从图像到图像重复。

    <script>
    $(document).ready(function (){
        $("#click4").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image2").offset().top
                }, 600);
        });
    });

</script>

    <script>
    $(document).ready(function (){
        $("#click5").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image4").offset().top
                }, 600);
        });
    });
</script>


<div id="top">
        <class id="image3"><img src="images/blank.png" alt=""/></class></div>

        <div id="gallery">  
        <img src="images/image3.jpg" alt=""/>
        </div>
<div id="title">
        Untitled<br>2013<br>size<br>Archival pigment print<br>
        Edition of <br></div>
<div id="arrows">
        <class id="click4"> <span class="arrow-n"></span> </class>
        </div>  
<div id="arrows">
        <class id="click5"> <span class="arrow-s"></span> </class>

</div>

<script>
    $(document).ready(function (){
        $("#click6").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image3").offset().top
                }, 800);
        });
    });

</script>

    <script>
    $(document).ready(function (){
        $("#click7").click(function (){
                $('html, body').animate({
                    scrollTop: $("#image5").offset().top
                }, 800);
        });
    });
</script>


<div id="top">
        <class id="image4"><img src="images/blank.png" alt=""/></class>  </div>

        <div id="gallery">  
        <img src="images/image4.jpg" alt=""/>
        </div>
<div id="title">
        Untitled<br>2013<br>size<br>Archival pigment print<br>
        Edition of <br></div>
<div id="arrows">
        <class id="click6"> <span class="arrow-n"></span> </class>
        </div>  
<div id="arrows">
        <class id="click7"> <span class="arrow-s"></span> </class>

</div>

我遇到的问题是当你上下移动时，图像似乎闪烁。两个问题。

滚动时是否有一种简单的方法可以避免大图像闪烁。
当您滚动到每个图像时，我可以添加淡入淡出淡出以及如何将其添加到脚本中。我认为这会减少闪烁的数量并增加一个很好的效果。谢谢你的任何建议。

Answer 1

我看过你发布的内容，但我无法让你的代码按原样运行。首先，您应该尝试将脚本组合为1.例如，每次单击都有一个功能可以滚动到1个图像。你应该做的只是创建一个函数然后检查图像滚动到。有很多方法可以做到这一点，但这是一个例子：

$(".clk").click(function () {
    var $this = $(this),
        img = $this.data('img');

    $('html, body').animate({
        scrollTop: $("#"+img).offset().top
    }, 600);
});

除此功能外，您还需要更改标记：

<div id="Div6">
    <div id="click7" data-img="image5" class="clk"> <span class="arrow-s"></span> 
    </div>
</div>

所以，我添加了一类clk，这就是现在要调用的函数，而不是单击ID，这样我们就可以将这个类添加到我们想要的任意数量的图像中。接下来，在您的函数中，您将滚动到图像的顶部，该图像被硬编码到每个ID函数中...我添加了一个HTML数据属性“data-”并将其称为img（“data-img”）。所以现在，当你点击类时，你将调用该函数来读取属性并知道滚动到哪里。

一旦你有了这个工作，请创建一个jsFiddle（jsfiddle.net），你将html，jquery和css粘贴到框中，你可以在那里运行代码。然后保存并将链接发回给我，以便我可以看到一个工作版本，我会再看看你。 ;-)

使用scrolltop减少闪烁并在滚动时添加淡入/淡出

1 个答案: