crawl bot
Infoscript - Desenvolvimento web
infoscript_logo
JavaScript
Slider com JavaScript
Publicado por antlou em 30/07/2017

Este objecto pode deslizar elementos da página horizontalmente usando os botões.

O script contém uma lista de elementos que podem ser mostrados um elemento de cada vez.
Pode mudar para o elemento de slide seguinte ou anterior quando o utilizador clicar nas setas ounos botões para visualizar para um slide específico.
Pode também deixar passar para o próximo automaticamente após um determinado período de tempo.

Resultado:

Vou agora colocar o codigo, utilizando JAVASCRIPT, HTML e CSS.

O "coração" do funcionamento está presente no script escrito em javascript

slider_js.js

var emadeSlider=function(idMain, parameters){
'use strict';
var elementList=[];
var elementListPoints=[];
var main=document.getElementById(idMain);
var currentSlideId=0;
var touchPx=0;

function _parameter(argArray){
    var defaults = {
        tagListElement:'li',
        classPointerBox:'pointerBox',
        pointer:true,
        prevNext:true,
        autoStart:true,
        enableKey:true,
        enableTouch:true,
        enableAutoStart:true,
        delayStart:6000,
    }
    if (argArray!=undefined)for(var i in argArray)defaults[i]=argArray[i];
    return defaults;
}
var option=_parameter(parameters);

function _createPointer(){
    var pointerBox=document.createElement("div");
    pointerBox.setAttribute('class',option.classPointerBox);
    for(var i=0, tmpLenght=elementList.length;i<tmpLenght;i++){
        var point=document.createElement("a");
        point.setAttribute('id','point'+i);
        point.setAttribute('href','#point'+i);
        point.innerText=i;
        point.onclick=function(e){changeSlide(e.srcElement.id.replace('point', ''));return false;}
        elementListPoints.push(point);
        pointerBox.appendChild(point);
        }
    elementListPoints[0].setAttribute('class','active');
    main.appendChild(pointerBox);
}

function _createPrevNext(){
    var prevBtn=document.createElement("a");
    prevBtn.setAttribute('class','prevBtn');
    prevBtn.setAttribute('href','#prev');
    prevBtn.innerText='<';        
    prevBtn.onclick=function(){prevSlide();return false;}
    var nextBtn=document.createElement("a");
    nextBtn.setAttribute('class','nextBtn');
    nextBtn.setAttribute('href','#next');
    nextBtn.innerText='>';        
    nextBtn.onclick=function(){nextSlide();return false;}
    main.appendChild(nextBtn);
    main.appendChild(prevBtn);
}

function _changePoint(slideId){
    elementListPoints[currentSlideId].setAttribute('class','');
    elementListPoints[slideId].setAttribute('class','active');
}

function changeSlide(slideId){
    if (slideId!=currentSlideId){
    if (option.pointer==true)_changePoint(slideId);
    if ((slideId>currentSlideId || (slideId==0 && currentSlideId==elementList.length-1)) &&!(slideId==elementList.length-1 &&currentSlideId==0)){
    //    console.log(slideId+' '+currentSlideId+' '+elementList.length);
    elementList[currentSlideId].setAttribute('class','active left');
    elementList[slideId].setAttribute('class','next left');
    }
    else{
    elementList[currentSlideId].setAttribute('class','active right');
    elementList[slideId].setAttribute('class','prev right');
    }
    var load = setTimeout(function(){
    elementList[currentSlideId].setAttribute('class','');
    elementList[slideId].setAttribute('class','active');
    currentSlideId=slideId;
    }, 700);
    }
}

function nextSlide(){
    if (currentSlideId+1<=elementList.length-1)changeSlide(currentSlideId+1);
    else changeSlide(0);
}
function prevSlide(){
    if (currentSlideId-1>=0)changeSlide(currentSlideId-1);
    else changeSlide(elementList.length-1);
}

function _createSliderElement(){
    var mainElementList=(option.tagListElement=='li')?main.childNodes[1]:main;
    var tmpElementList=mainElementList.childNodes;
    //Creo lista Elementi
    for(var i=0, tmpLenght=tmpElementList.length, y=0;i<tmpLenght;i++){
        if (tmpElementList[i].nodeType==1){
            tmpElementList[i].setAttribute('id','el'+y);
            elementList.push(tmpElementList[i]);
            y++;
        }
    }
    elementList[0].setAttribute('class','active');
}

function _setup(){
    _createSliderElement();
    if (option.pointer==true)_createPointer();
    if (option.prevNext==true)_createPrevNext();
    if (option.enableKey==true){document.onkeydown=function(e){var t=window.event?e.which:e.keyCode;if(t==39)nextSlide();if(t==37)prevSlide();};}
    if (option.enableTouch==true){
        main.addEventListener('touchstart', function(e){
            touchPx=e.changedTouches[0].pageX;
            }, true);
        main.addEventListener('touchend', function(e){
            if (e.changedTouches[0].pageX<touchPx-30 || e.changedTouches[0].pageX>touchPx+30){
                if (e.changedTouches[0].pageX<touchPx)nextSlide();
                else prevSlide();
            }
        
        }, true);
    }
    if (option.enableAutoStart==true){
    var autoStart=setInterval(nextSlide,option.delayStart);
    main.addEventListener("mouseover", function(){clearInterval(autoStart);});
    main.addEventListener("mouseout", function(){autoStart=setInterval(nextSlide,option.delayStart);});
    }
}
_setup();
}

slider.html
<html>
<head>
    <link rel="stylesheet" type="text/css" href="slider.css" />
    <script type="text/javascript" src="slider.js"></script>
</head>
<body>
<div id="myslider" class="style3">
<ul>
<li><div style="width:100%;height:500px;"><img src="01.jpg"></div></li>
<li><div style="width:100%;height:500px;"><img src="02.jpg"></div></li>
<li><div style="width:100%;height:500px;"><img src="03.jpg"></div></li>
<li><div style="width:100%;height:500px;"><img src="04.jpg"></div></li>
<li><div style="width:100%;height:500px;"><img src="05.jpg"></div></li>
<li><div style="width:100%;height:500px;"><img src="06.jpg"></div></li>
<li><div style="width:100%;height:500px;"><img src="07.jpg"></div></li>
<li><div style="width:100%;height:500px;"><img src="08.jpg"></div></li>
</ul>
</div>
<script>
window.addEventListener("load", function(){var mysliders=emadeSlider('myslider',{
pointer:true,
});});
</script>
</body>
</html>

slider_css.css

#myslider img{
    display:block;
    width:100%;
}
#myslider ul{margin:0;padding:0;}



/* -----------FUNCIONAMENTO (slide-fade) ----------- */
.style1 ul>li{transition:transform 0.6s ease-in-out, opacity 0.6s ease-in-out;}
.style1 ul>li.active{opacity:1;z-index:2;}
.style1 ul>li.active.left{opacity:0;transform:translate3d(-100%,0,0);}
.style1 ul>li.active.right{opacity:0;transform:translate3d(100%,0,0);}
.style1 ul>li.next,.style1 ul>li.prev{position:absolute !important;top:0;display:block !important;opacity:1;z-index:1;}


/* -----------FUNCIONAMENTO (fade) ----------- */
.style2 ul>li{transition:opacity 0.6s ease-in-out;}
.style2 ul>li.active{opacity:1;z-index:2;}
.style2 ul>li.active.left,.style2 ul>li.active.right{opacity:0;}
.style2 ul>li.next,.style2 ul>li.prev{position:absolute !important;top:0;display:block !important;opacity:1;z-index:1;}

/* -----------FUNCIONAMENTO (fade) ----------- */
@keyframes slidenext{0%{transform:translate3d(100%,0,0);}100%{transform:translate3d(0,0,0);}}
@-webkit-keyframes slidenext{0%{-webkit-transform:translate3d(100%,0,0);}100%{-webkit-transform:translate3d(0,0,0);}}
@-moz-keyframes slidenext{0%{-moz-transform:translate3d(100%,0,0);}100%{-moz-transform:translate3d(0,0,0);}}
@-ms-keyframes slidenext{0%{-ms-transform:translate3d(100%,0,0);}100%{-ms-transform:translate3d(0,0,0);}}
@-o-keyframes slidenext{0%{-o-transform:translate3d(100%,0,0);}100%{-o-transform:translate3d(0,0,0);}}

@keyframes slideprev{0%{transform:translate3d(-100%,0,0);}100%{transform:translate3d(0,0,0);}}
@-webkit-keyframes slideprev{0%{-webkit-transform:translate3d(-100%,0,0);}100%{-webkit-transform:translate3d(0,0,0);}}
@-moz-keyframes slideprev{0%{-moz-transform:translate3d(-100%,0,0);}100%{-moz-transform:translate3d(0,0,0);}}
@-ms-keyframes slideprev{0%{-ms-transform:translate3d(-100%,0,0);}100%{-ms-transform:translate3d(0,0,0);}}
@-o-keyframes slideprev{0%{-o-transform:translate3d(-100%,0,0);}100%{-o-transform:translate3d(0,0,0);}}

.style3 ul>li{transition:transform 0.5s ease-in-out;}
.style3 ul>li.active.left{transform:translate3d(-100%,0,0);}
.style3 ul>li.active.right{transform:translate3d(100%,0,0);}
.style3 ul>li.next{position:absolute !important;top:0;display:block !important;-webkit-animation:slidenext 0.5s ease-in-out 1;}
.style3 ul>li.prev{position:absolute !important;top:0;display:block !important;-webkit-animation:slideprev 0.5s ease-in-out 1;}


#myslider{overflow:hidden;position:relative;width:100%;}
#myslider ul>li{width:100%;position:relative;display:none;}
#myslider ul>li.active{display:block;}
#myslider .pointerBox{
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 15;
    width: 60%;
    margin-left: -30%;
    padding-left: 0;
    list-style: none;
    text-align: center;
    overflow:hidden;
}

#myslider .pointerBox a{
    background-color: rgba(0,0,0,0.3);
    border: 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    cursor: pointer;    
}
#myslider .pointerBox a.active{
    background-color: #fff;
    border: 1px solid #685d9f;
    margin: 0;
    width: 12px;
    height: 12px;
    }
    
#myslider .nextBtn{
    position:absolute;
    top:0;
    right: 0;
    color: rgba(0,0,0,0.3);
    width: 15%;
    height:50%;
    padding-top:17%;    /* posicionamento do seguinte    */
    font-size: 50px;
    text-align: center;
    text-decoration: none;
    z-index:3;
    }
#myslider .prevBtn{
    position:absolute;
    top:0;
    left: 0;
    color: rgba(0,0,0,0.3);
    width: 15%;
    height:100%;
    padding-top:17%;    /* posicionamento do anterior    */
    font-size: 50px;
    text-align: center;
    text-decoration: none;
    z-index:3;
}

Download Código
Espero ter sido útil. Deixe avaliação ao script
1 votos - 5 pontos - 33 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.
guru.com linkedin.com facebook twiter
Design and developement by infoscript