构建一个不太基本的照片滑块答案

【问题标题】：Building a not so basic photo slider构建一个不太基本的照片滑块
【发布时间】：2017-08-10 16:51:25
【问题描述】：

编程和自学 javascript 的初学者。到目前为止，我已经设法构建了一个基本的照片滑块，当您单击“下一个”或上一个按钮时，它会更改图片。很基本的东西。这是我的代码：

js:

var imageCount = 1;


function change(x)  {
    imageCount = imageCount + x;
    if(imageCount < 1)  {
        imageCount = 1;
        return;
    } else if (imageCount > 12) {
        imageCount = 12;
        return;
    }
    var image = document.getElementById('front');
    var str1 = "Images/01Pictures/Image";
    var str2 = imageCount;
    var str3 = ".jpg"
    var sum = str1.concat(str2, str3);

    image.src = sum;

这很有效，尽管它是静态的。现在我想尝试一些更雄心勃勃的事情。像这样的：

这涉及到很多我不知道的事情。图像被空白分隔并在悬停时滑动，主图片变大等...... 由于我是新手，我不知道从哪里开始。谁能指出我正确的方向。要么是一个教程，要么只是关于我需要学习才能做到这一点的一些想法。我不希望代码像我想通过这样做来学习那样去做，但我需要一些指导。感谢您的宝贵时间。

【问题讨论】：

标签： javascript jquery css slider photo

【解决方案1】：

我建议您从以下链接开始使用 w3school：https://www.w3schools.com/w3css/w3css_slideshow.asp

同样，对 css 动画有一些了解也是很好的。 https://www.w3schools.com/css/css3_animations.asp

这应该是一个好的开始。祝你好运！

【讨论】：

谢谢，这很有帮助。我需要帮助的主要事情是滚动图像“离开”屏幕并在悬停时移动到中心。

【解决方案2】：

本教程似乎正是您想要的：

https://css-tricks.com/moving-boxes/

【讨论】：