滚动图片

Question

你好Stackoverflow。 我的网站上有一份工作，我自己无法理解。

我右边有一个盒子，我想要我所有的赞助商，但不是让盒子真的很长，我只是想要一个简单的“幻灯片”，它只是逐渐消失成一张图片，它会停留3秒钟，然后渐渐消失另外一张照片。 他们大多数都是90x90，但有些可能是不同的尺寸，不应该搞砸。

如果你没有从我糟糕的英语中得到这个概念，我有一张照片可以证明。 http://imgur.com/oPausP2

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

提前致谢！

Answer 1

尝试这样的事情，不要忘记你需要jquery库。 DEMO工作jsfiddle示例与谷歌的图像。

HTML：

<img src="" id="current" alt="" />
<ul class="slider">
    <li><img src="http://p4.storage.canalblog.com/49/16/976515/75966520.gif" alt="" /></li>
    <li><img src="http://www.graycon.com/wp-content/uploads/2013/01/Sponsor-Logos4.jpg" alt="" /></li>
    <li><img src="http://forum.mmaglobal.com/files/mobilemarketingforum.com/Image/SponsorFooter_SanDiego_v9_2.jpg" alt="" /></li>
</ul>

CSS：

ul.slider { display: none; }

jQuery的：

<script src="/libraries/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var idx = 0;
    var interval = 3000;
    var images = $('ul.slider li img');
    setInterval(function(){
        idx++;
        $('img#current').fadeOut(function () { 
            $(this).attr('src', $(images[idx%images.length]).attr('src')).fadeIn()                
        });
    }, interval);
});
</script>

Answer 2

我在公司的主页上使用它。 这里有一个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使用供应商前缀才能使用各种浏览器。）

.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; visibility:hidden; opacity:0; 到所有.slide DOM元素。 在.active状态下，不透明度从0转换为1持续1秒（ transition:opacity 1s ease; ）。 请记住，当.active状态消失时，您需要延迟1s的visibility ，以便opacity可以转换，因此visibility 0s ease 1s; 。

在Javascript中， num_slides将计算.slide DOM元素的数量; 该变量稍后将与模数（％）一起使用 ： slide % num_slides返回从0到幻灯片数减1的.eq() 。我们稍后将使用jQuery的.eq()方法依次选择每个DOM元素并应用它的.active类。

Answer 3

我建议你使用jquery滑块。 我有jquery.cycle的经验。 它具有许多功能，并且易于安装

http://jquery.malsup.com/cycle2/