0

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

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

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

  1. 有没有一种简单的方法可以避免滚动时大图像闪烁。
  2. 当您滚动到每个图像时，我可以添加淡入淡出吗？如何将其添加到脚本中。我认为这将减少闪烁的数量并增加一个不错的效果。感谢您的任何建议。
4

1 回答 1

0

我已经查看了您发布的内容，但我无法让您的代码按原样工作。首先，您应该尝试将您的脚本合并为 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 粘贴到框中，然后可以在那里运行代码。然后保存它并将链接发回这里给我，这样我就可以看到一个工作版本，我会再找你。;-)

于 2013-11-13T11:44:47.023 回答