滑动内部div左无限循环

Question

我花了过去的3个小时试图玩jquery和得到这个权利没有运气，并有谷歌每一个可能的单词组合，看看我能找到类似的东西，我需要的。我知道这会很简单，我的js很糟糕

GOAL: innerdiv需要用无限循环向左滑动。滑块(外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.jpghttp://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;
}