如何向自动Jquery幻灯片添加相对于幻灯片位置向左/向右滚动的控件

Question

 function SlideDivSection(){ var items = ['banner1', 'banner2', 'banner3', 'banner4', 'banner5']; var container = $('#banner'); var root = document.compatMode == 'BackCompat' ? document.body:document.documentElement; var isVerticalScrollbar = root.scrollHeight > root.clientHeight; if(isVerticalScrollbar == false){ var item_width = window.screen.availWidth - 17; } else { var item_width = window.screen.availWidth; } window.setInterval(function(){ var first = $('.banner:first', container); var faux_id = first.attr('id')+'faux'; var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({ left:item_width * items.length }) container.append(faux_elem); faux_elem = $('#'+faux_id, container); $('.banner', container).animate({ left:'-='+item_width }, 2000, function(){ first.remove(); faux_elem.attr('id', faux_elem.attr('id').replace('faux', '')) }) }, 3000) } $(function(){ SlideDivSection(); }); 

 img, video, canvas{ max-width:100%; } .menu{ width:20%; height:100%; float:left; align-self:center; font:Verdana, Arial, Helvetica, sans-serif; text-align:center; } .menu a{ color:#FFFFFF; text-decoration:none; } .menu a:hover{ color:#CCCCCC; } .submenu{ width:11%; height:100%; float:left; align-self:center; text-align:center; } .submenu a{ text-decoration:none; } .submenu a:hover{ } .banner_botoes{ width:18%; height:100%; float:left; z-index:2; border-style:solid; border-width:thin; border-color:#000000; border-radius:25px; } .banner_botoes:hover{ cursor:pointer; border-color:#99FFFF; background-color:#FFFFFF; } .banner{ position:absolute; left:0; top:0; width:100%; height:100%; } .destaque{ top:0px; width:25%; height:100%; float:left; } #container{ position:absolute; width:100%; height:1350px; } #cabecalho{ top:0px; width:100%; height:4%; display:flex; justify-content:center; background-color:rgba(0, 0, 0, 0.8); } #cabecalho2_produtos{ position:relative; width:100%; height:8%; display:flex; justify-content:center; background-color:#CCCCCC; } #cabecalho2_fragrancias{ position:relative; width:100%; height:5%; display:flex; background-color:#FFFFFF; } #cabecalho2_clientes{ position:relative; width:100%; height:5%; display:flex; background-color:#FFFFFF; } #menu{ margin:auto; width:80%; } #conteudo_produtos{ position:relative; width:100%; height:68%; } #conteudo_fragrancias{ position:relative; width:100%; height:65%; } #conteudo_clientes{ position:relative; width:100%; height:65%; } #conteudo_suporte{ position:relative; width:100%; height:70%; } #banner{ position:relative; width:100%; height:47%; overflow:hidden; } #banner_botoes{ position:relative; left:45%; top:85%; width:10%; height:2%; z-index:1; } #banner2{ left:100%; background-color:#000000; } #banner3{ left:200%; background-color:#333333; } #banner4{ left:300%; background-color:#666666; } #banner5{ left:400%; background-color:#999999; } #destaques{ position:relative; width:100%; height:15%; } #faixa{ position:relative; width:100%; height:6%; } #rodape{ position:relative; width:100%; height:28%; background-color:#CCCCCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="container"> <div id="cabecalho"> <div id="menu"> <div id="menu1" class="menu"><a href="index.php"><b>Home</b></a></div> <div id="menu2" class="menu"><a href="produtos.php">Produtos</a></div> <div id="menu3" class="menu"><a href="fragrancias.php">Fragrâncias</a></div> <div id="menu4" class="menu"><a href="clientes_atividades.php">Clientes e Atividades</a></div> <div id="menu5" class="menu"><a href="suporte.php">Suporte</a></div> </div> </div> <div id="banner"> <div id="banner_botoes"> <div id="banner_botao1" class="banner_botoes"></div> <div id="banner_botao2" class="banner_botoes"></div> <div id="banner_botao3" class="banner_botoes"></div> <div id="banner_botao4" class="banner_botoes"></div> <div id="banner_botao5" class="banner_botoes"></div> </div> <div id="banner1" class="banner"><img width="100%" height="100%" src="" /></div> <div id="banner2" class="banner"><img width="100%" height="100%" src="" /></div> <div id="banner3" class="banner"><img width="100%" height="100%" src="" /></div> <div id="banner4" class="banner"><img width="100%" height="100%" src="" /></div> <div id="banner5" class="banner"><img width="100%" height="100%" src="" /></div> </div> <div id="destaques"> <div id="destaque1" class="destaque"><img width="100%" height="100%" src="" /></div> <div id="destaque2" class="destaque"><img width="100%" height="100%" src="" /></div> <div id="destaque3" class="destaque"><img width="100%" height="100%" src="" /></div> <div id="destaque4" class="destaque"><img width="100%" height="100%" src="" /></div> </div> <div id="faixa"><img width="100%" height="100%" src="" /></div> <div id="rodape"></div> </div> 

I have the following Jquery slideshow:

function SlideDivSection(){
var items = ['banner1', 'banner2', 'banner3', 'banner4', 'banner5'];
var container = $('#banner');
var root = document.compatMode == 'BackCompat' ? document.body:document.documentElement;
var isVerticalScrollbar = root.scrollHeight > root.clientHeight;
if(isVerticalScrollbar == false){
    var item_width = window.screen.availWidth - 17;
} else {
    var item_width = window.screen.availWidth;
}

window.setInterval(function(){
    var first = $('.banner:first', container);
    var faux_id = first.attr('id')+'faux';
    var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({
        left:item_width * items.length
    })
    container.append(faux_elem);
    faux_elem = $('#'+faux_id, container);

    $('.banner', container).animate({
        left:'-='+item_width
    }, 2000, function(){
        first.remove();
        faux_elem.attr('id', faux_elem.attr('id').replace('faux', ''))
    })
}, 3000); }// end of SlideDivSection

$(function(){ SlideDivSection(); });

The HTML:

<div id="banner">
    <div id="banner_botoes">
        <div id="banner_botao1" class="banner_botoes"></div>
        <div id="banner_botao2" class="banner_botoes"></div>
        <div id="banner_botao3" class="banner_botoes"></div>
        <div id="banner_botao4" class="banner_botoes"></div>
        <div id="banner_botao5" class="banner_botoes"></div>
    </div>
    <div id="banner1" class="banner"><img width="100%" height="100%" src="" /></div>
    <div id="banner2" class="banner"><img width="100%" height="100%" src="" /></div>
    <div id="banner3" class="banner"><img width="100%" height="100%" src="" /></div>
    <div id="banner4" class="banner"><img width="100%" height="100%" src="" /></div>
    <div id="banner5" class="banner"><img width="100%" height="100%" src="" /></div>
</div>

And the CSS:

#banner{
position:relative;
width:100%;
height:47%;
overflow:hidden; }

#banner_botoes{
position:relative;
left:45%;
top:85%;
width:10%;
height:2%;
z-index:1; }

#banner2{
left:100%;
background-color:#000000; }

#banner3{
left:200%;
background-color:#333333; }

#banner4{
left:300%;
background-color:#666666; }

#banner5{
left:400%;
background-color:#999999; }

.banner_botoes{
width:18%;
height:100%;
float:left;
z-index:2;
border-style:solid;
border-width:thin;
border-color:#000000;
border-radius:25px; }

.banner_botoes:hover{
cursor:pointer;
border-color:#99FFFF;
background-color:#FFFFFF; }

.banner{
position:absolute;
left:0;
top:0;
width:100%;
height:100%; }

And its working ok. However, I want to make make the div "banner_botoes" to be a control to this slideshow, making it slide left or right onClick relative to the "banner" position, and then resume the slideshow.

To be more precise, I want it to be exactly like the slideshow on the Apple BR website: www.apple.com/br

Thanks so much for the attention and sorry for any english mystakes in my question.

Answer 1

 var items=""; var container =""; var root=""; var isVerticalScrollbar=""; var autoSlide=""; function SlideDivSection(){ items = ['banner1', 'banner2', 'banner3', 'banner4', 'banner5']; container = $('#banner'); root = document.compatMode == 'BackCompat' ? document.body:document.documentElement; isVerticalScrollbar = root.scrollHeight > root.clientHeight; if(isVerticalScrollbar == false){ var item_width = window.screen.availWidth - 17; } else { var item_width = window.screen.availWidth; } autoSlide = window.setInterval(function(){ slideChange(0); }, 3000); }// end of SlideDivSection function slideChange(slideDir){ var first = $('.banner:first', container); var faux_id = first.attr('id')+'faux'; var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({ left:item_width * items.length }) container.append(faux_elem); faux_elem = $('#'+faux_id, container); if(slideDir==1){ $('.banner', container).animate({ left:'+='+item_width }, 2000, function(){ first.remove(); faux_elem.attr('id', faux_elem.attr('id').replace('faux', '')) }) }else{ $('.banner', container).animate({ left:'-='+item_width }, 2000, function(){ first.remove(); faux_elem.attr('id', faux_elem.attr('id').replace('faux', '')) }) } } function slideControl(strAction){ if(slideControl=="Stop"){ clearInterval(autoSlide); }else if(slideControl=="Play"){ autoSlide = window.setInterval(function(){ slideChange(0); }, 3000); } }else if(slideControl=="Next"){ slideChange(0); }else if(slideControl=="Back"){ slideChange(1); } } $(function(){ SlideDivSection(); }); 

Above slideControl("Next") proceeds 1; slideControl("Back") goes back 1; slideControl("Stop") stops the interval and slideControl("Play") starts the interval.