代码之家 › 专栏 › 技术社区 › user2810762

滑动内部div左无限循环

slide slider css html jquery

user2810762 · 技术社区 · 10 年前

在过去的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秒后激活?

1 回复 | 直到 10 年前

Nico O 10 年前

这不是完美的,但这是一个开始。您可以单独使用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>