jquery - 向左滑动内部div无限循环

Question

我花了最后 3 个小时尝试使用 jquery 并在没有运气的情况下正确完成此操作，并让谷歌搜索所有可能的单词组合以查看我是否可以找到与我需要的类似的东西。我知道这会很简单，我的 js 很糟糕

目标:内部div需要无限循环向左滑动。 slider (外部 div)的宽度为 1040px，隐藏了溢出。内部宽度为 3198px，带有背景图片。我现在的目标是让内部 div 幻灯片向左滑动，并带有相同的背景图像(360 照片)无限重复，就好像它永远不会结束一样。下面是我的 html 标记

<div class="slider">
  <div class="inner"></div>
</div>

和 CSS:

.slider {
position: relative;
width: 1040px;
height: 311px;
overflow: hidden;
}
.inner {
position: absolute;
right: 0px;
width: 3198px;
height: 311px;
background: url(img/VirtualTour_NormalLighting.jpg) no-repeat;
} 

我的最终目标:第一个图像基本上是死的(没有灯光或颜色)，第二个图像点亮了火。当 div 向左滑动时，图像的部分需要点亮，然后在它后面的旧部分需要返回灰度。希望这是有道理的。下面是两张图片:

http://dreamsynk.com/img/VirtualTour_NormalLighting.jpg http://dreamsynk.com/img/VirtualTour_ExtraLighting.jpg

任何帮助都会很有帮助!一直在挣扎

谷歌搜索后我发现了这个:

// retrieve the element
 element = document.getElementById("ani");

// reset the transition by...
element.addEventListener("click", function(e){
e.preventDefault;

// -> removing the class
element.classList.remove("delay-1");

// -> triggering reflow /* The actual magic */
// without this it wouldn't work. Try uncommenting the line and the transition won't be     retriggered.
element.offsetWidth = element.offsetWidth;

// -> and re-adding the class
element.classList.add("delay-1");
}, false);

是否正是我想要接受的，它需要在幻灯片结束时出现，而不是在单击时出现。即使有超时功能或类似上述的东西在 40 秒后激活？

Answer 1

嗯，这并不完美，但这是一个开始。您可以单独使用 CSS 来完成此操作。这是一个例子:

http://jsfiddle.net/24AEu/2/

这是一个带有供应商前缀的版本:http://jsfiddle.net/24AEu/4/

CSS

@keyframes move-bg {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 150% 0%;
    }
}

@keyframes lightup {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
.slider {
    position: relative;
    width: 1040px;
    height: 311px;
    overflow: hidden;
}
.inner {
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-image: url(http://dreamsynk.com/img/VirtualTour_NormalLighting.jpg);
    background-position: 0% 0%;
    background-repeat: repeat;
    animation: move-bg 6s infinite;
    animation-delay: 0s;
    animation-play-state: running;
    animation-timing-function:linear;
}
.inner.light {
    background-image: url(http://dreamsynk.com/img/VirtualTour_ExtraLighting.jpg);
    opacity:0;

    background-position: 0% 0%;
    background-repeat: repeat;
    animation:move-bg 6s infinite, lightup 1s infinite;
    animation-delay: 0s;
    animation-play-state: running;
    animation-timing-function:linear;

}

HTML

<div class="slider">
    <div class="inner"></div>
    <div class="inner light"></div>
</div>