用幻灯片中的图像转换div

时间:2014-06-19 19:10:20

标签: javascript jquery html

我有以下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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

如果你不想改变你的结构,但可以改变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的不需要的内联样式