Javascript 通过编程在网站中的图像上滚动

我正在尝试使用HTML和JavaScript建立一个网站，一次显示图像的各个部分，通过单击按钮或图像的各个部分，将滚动到图像的不同部分

|-----|——————————————
|--A-| |--B-| |--C-|
|-----||---------||----|

如果图像是由A、B和C串联而成，我希望一次只显示一个部分，A、B或C，通过单击按钮，滚动到左侧或右侧显示一个部分。因此，如果显示B，我单击B中的一个按钮，我希望浏览器向右滚动，显示C

我想我可以做到这一点，让三个图像彼此相邻，相距足够远，使另一侧的图像不会显示，然后使用javascript隐藏滚动按钮，然后使用javascript滚动到指定图像位置的html锚

但是，我很难将图像移出屏幕。如果我的小计划要起作用，我需要把一个离屏放到左边，把C离屏放到右边。如何通过HTML实现这一点？我可以通过HTML来完成吗？有没有更好的方法来获得我想要的功能

---

谢谢

对于使用锚定的纯HTML+CSS来说，这可能是可能的，但一种更健壮的方法是在其中注入一些JavaScript。我想你是想让一些东西在视觉上有吸引力，所以有一些动画可能也没什么坏处

您不需要将图像从屏幕上移开。将

溢出

设置为

隐藏

的div就可以了。只要做一个和你的一个片段一样宽的div。然后，您只需要设置内部图像边缘的动画。如果您了解jQuery，这可能会有所帮助：

CSS

div {
    width: 300px;
    heigth: 500px;
    overflow: hidden;
}

HTML

#images div有一个包含图像A、B和C的图像

<div id="images">
    <img src="abc.jpg" width="900" height="500" />
</div>

希望这有帮助。请注意，您不必将它们全部放在一个图像中，这只是一种方法。你也可以有一个内部div和图像分别在那里，你可以动画的内部div。这取决于你

$('div#images img').click(function() {
    var marginLeft = parseInt($(this).css('margin-left'));
    var newMarginLeft = marginLeft - 300;
    if(newMarginLeft >= $(this).width()) {
        newMarginLeft = 0;
    } 

    $(this).animate({
        marginLeft: newMarginLeft
    }, 500);
    return false;
});