在幻灯片中转换带有图像的div

Question

我有以下html结构

<div id="slide">
     <div style=" position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;overflow:hidden;">

        <div class='DS_Banners_Topo' id='DS_Banners_Topo_1'>
            <a href='#' target='_self'><img alt='Slide1' src='http://www.dotstore.com.br/74446_salessuplementos/banners/slide1.jpg' /></a>
        </div>
        <div class='DS_Banners_Topo' id='DS_Banners_Topo_2'>
            <a href='#' target='_self'><img alt='Slide2' src='http://www.dotstore.com.br/74446_salessuplementos/banners/slide2.jpg' /></a>
        </div>
        <div class='DS_Banners_Topo' id='DS_Banners_Topo_3'>
            <a href='#' target='_self'><img alt='Slide3' src='http://www.dotstore.com.br/74446_salessuplementos/banners/slide3.jpg' /></a>
        </div>

    </div>

</div>

需要把它变成一个幻灯片来改变结构中的任何东西。继续上课。在这些html结构中可以这样做吗？

演示代码 JSFiddle

Answer 1

如果您不想更改您的结构，但可以更改css，下面是您可以做的一个示例：

CSS

#slide {
    margin: 22px 0 0 0;
    position: relative;
    height:200px;
    overflow: hidden;
}

#slide>div{
    position: relative;
}

.DS_Banners_Topo{
    position: absolute;
    top:0;
    width:100%;
    overflow: hidden;
}

.DS_Banners_Topo img{
    width:100%;
    display: block;
}

JS

$(document).ready(function(){

    //current slide index
    var counter = 0,
    slides = $('.DS_Banners_Topo');

    //position slides
    slides.each(function(i,e){ $(this).css('left',i-1+'00%'); });

    //change slide every 1000ms
    setInterval(function(){
        counter = counter>slides.length-3 ? 0 : ++counter;
        $('#slide>div').animate({'left':-counter+'00%'});
    },1000);

});

​

JS Fiddle演示

​

注意，我删除了#slide中div的不需要的内联样式。

Answer 2

可以使用jQuery或其他库来轻松地旋转每个div上的可见性。只要谷歌jQuery旋转木马，你就会找到无数的解决方案来解决你的问题。大多数将保留所有现有的类。