Question

我花了最后3个小时尝试使用jquery并且没有运气得到这个权利并且谷歌每个可能的单词组合看到我可以找到类似于我需要的东西。我知道这很简单，我的js太可怕了

目标：内部div需要向左滑动无限循环。 slider（外部div）的宽度为1040px，隐藏溢出。 inner的宽度为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>

滑动内部div留下无限循环

1 个答案: