Преобразование div с изображениями на слайде

#javascript #jquery #html

#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-структуре?

ДЕМОНСТРАЦИОННЫЙ КОД JSFiddle

1. Попытка представить эту структуру в форме html с помощью какого-либо плагина jquery jsfiddle.net/JoaoFelipePego/b4YHe

2. Что-то вроде этого: jsfiddle.net/robertrozas/NcPjg/1

3. @user3743128 я вообще не вижу javascript, вам следует изменить заголовок вопроса на «не мог бы кто-нибудь, пожалуйста, создать мне слайдер?»

Ответ №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;
}

 $(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

Обратите внимание, что я удалил ненужные встроенные стили для div внутри #slide

Ответ №2:

Можно было бы использовать jQuery или другую библиотеку, чтобы легко изменять видимость каждого из этих divs. Просто Google jQuery Carousel, и вы найдете бесконечное количество решений вашей проблемы. Большинство сохранит все существующие классы.