javascript - 滚动浏览图片

Question

你好，Stackoverflow。我的网站有一份小工作，我无法自己弄清楚。

我在右边有一个盒子，我想要所有的赞助商，但我不想把盒子做得很长，我只想要一个简单的“幻灯片”，它会淡入图片中，停留 3 秒，然后它消失在另一张照片中。它们中的大多数将是 90x90，但有些尺寸可能不同，这不应该搞砸。

我有一张图片演示，如果你没有从我糟糕的英语中理解这个概念。 http://imgur.com/oPausP2

1=赞助商图片。在此框中，它应该在不同赞助商之间滑动。

提前致谢!

Answer 1

我在 my company's home page 上使用它.这是一个 codepen为了它。我喜欢尽可能使用 CSS 并尽量减少 javascript。

DOM:

<div class="slides_container">
  <div class="slide"><img src="img1.jpg"></div>
  <div class="slide"><img src="img2.jpg"></div>
  <div class="slide"><img src="img3.jpg"></div>
  <div class="slide"><img src="img4.jpg"></div>
  <div class="slide"><img src="img5.jpg"></div>
</div>

CSS:使用transition 属性淡入淡出。 (请记住，您需要在 transition 上使用 vendor 前缀才能使用各种浏览器。)

.slides_container {
    height:90px;
    width:90px;
    overflow:hidden;
    position:relative;
}
    .slides_container .slide {
        position:absolute;
        visibility:hidden;
        opacity:0;
        transition:opacity 1s ease, visibility 0s ease 1s;
    }
    .slides_container .slide.active {
        visibility:visible;
        opacity:1;
        transition:opacity 1s ease;
    }

Javascript:这可以在没有 jQuery 的情况下完成，但我将在这里使用它:

jQuery(document).ready(function($){
    /*make sure the first element shows up*/
    $('.slides_container .slide:first-child').addClass("active");
    var active_slide = 0,
        dom_slides = $('.slides_container .slide'),
        num_slides = dom_slides.length,
        myInterval = setInterval(function(){
            if(active_slide>(num_slides*5+1))
                clearInterval(myInterval);
            changeSlide(++active_slide);
        },6000);
    function changeSlide(slide) {
        if((slide = slide%num_slides)<0) slide+=num_slides;
        dom_slides.removeClass('active').eq(slide).addClass('active');
    }
});

(在我的代码中，我添加了 if(active_slide>(num_slides*5+1)) clearInterval(myInterval); 这只会在 5 个周期后停止旋转 - 所以它不会永远运行。如果你希望它是无限的，你可以只删除这两行。)

好的，解释:

CSS 将应用 visibility:hidden; opacity:0; 到所有 .slide DOM 元素。在 .active 状态下，不透明度从 0 过渡到 1，持续 1 秒(transition:opacity 1s ease;)。请记住，当 .active 状态消失时，您需要将 visibility 延迟 1 秒，以便 opacity 可以转换，因此 visibility 为 0s缓动 1s;.

在Javascript中，num_slides会统计.slide DOM元素的个数；该变量稍后将与 modulo (%) 一起使用: slide % num_slides 返回从 0 到幻灯片数量减 1 的整数。稍后我们将使用 jQuery 的 .eq() 方法依次选择每个 DOM 元素并将 .active 类应用于它。