滑动内部 div 向左无限循环

Question

在过去的 3 个小时里，我一直在尝试玩 jquery，但没有运气就做到这一点，并让谷歌搜索所有可能的单词组合，看看我能找到类似于我需要的东西。我知道这会很简单，我的js很糟糕

目标：内部 div 需要无限循环向左滑动。滑块（外部 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>