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结构中执行此操作？

DEMO CODE JSFiddle

Answer 1

可以使用jQuery或其他库轻松旋转每个div上的可见性。只需Google jQuery Carousel，您就可以找到适合您问题的无数解决方案。大多数将保留所有现有的类。

Answer 2

如果你不想改变你的结构，但可以改变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 Demo

请注意，我删除了#slide

中div的不需要的内联样式

用幻灯片中的图像转换div

2 个答案:

JS Fiddle Demo