Question

你好Stackoverflow。我的网站有一点工作，我不能自己解决。

我右边有一个盒子，我想要所有的赞助商，但是我不想让盒子真的很长，我只想要一个简单的幻灯片＆＃34;它只是淡入一张图片，它停留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

我在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上使用供应商前缀才能使用各种浏览器。）

.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 ease 1s;。

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

Answer 3

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

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

滚动图片

3 个答案: