PROVAAUTO by @Gianluca_Pet - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<object>Incorpora risorse varie nella pagina web.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
postDefinisce un metodo di invio di dati al server
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<iframe>Crea un frame all'interno di una pagina HTML.

Users

Log in to search for users

Explore

Find inspiration

quello che si vede in alto nella c

Palinsesto Radio

La porcellina Milly

Refresh page script

JS Oggetti ed eventi es2

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
  <head>
    <title>AUTO TOP</title>
    <style></style>

<script>
</script>
  </head>
  <body>
    <div class="spacer"></div>
<div class="arrow" onclick="mySlideLeft()"><img src="http://cerati.org/eoitecne/img/down.png" class="arrowleft arimage"/></div><div class="slider-cont" id="slider-cont"><!--<div class="slider-layer"  id="slider-cont"></div>--><div class="test-slider">
            <div class="cont-slider" onclick="selectSliderElement(this)" id="ext-1"><img class="flat-w-image image-slider" src="https://www.picng.com/upload/bmw_logo/png_bmw_logo_63586.png"/>

			<img src="https://www.picng.com/upload/bmw_logo/png_bmw_logo_63586.png" class="image-w"/>
			</div>
			<div class="cont-slider" onclick="selectSliderElement(this)" id="ext-2">

            <img class="flat-w-image image-slider" src="https://www.freepnglogos.com/uploads/mercedes-logo-png/mercedes-logo-mercedes-benz-logo-png-transparent-svg-vector-bie-13.png"/><img src="https://www.freepnglogos.com/uploads/mercedes-logo-png/mercedes-logo-mercedes-benz-logo-png-transparent-svg-vector-bie-13.png" class="image-w"/></div>
<div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-3"><img class="flat-w-image image-slider" src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c468.png"/><img src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c468.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-4"><img class="flat-w-image image-slider" src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c18.png"/><img src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c18.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-5"><img class="flat-w-image image-slider" src="https://www.freeiconspng.com/thumbs/honda-logo-png/honda-logo-png-picture-20.png"/><img src="https://www.freeiconspng.com/thumbs/honda-logo-png/honda-logo-png-picture-20.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-6"><img class="flat-w-image image-slider" src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c5e.png"/><img src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c5e.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-7"><img class="flat-w-image image-slider" src="https://www.freepnglogos.com/uploads/toyota-logo-png/toyota-logos-brands-10.png"/><img src="https://www.freepnglogos.com/uploads/toyota-logo-png/toyota-logos-brands-10.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-8"><img class="flat-w-image image-slider" src="https://purepng.com/public/uploads/thumbnail//purepng.com-renault-logorenaultgroupe-renaultautomobile-manufacturerrenault-automobilesrenault-logo-17015276106936zgwt.png"/><img src="https://purepng.com/public/uploads/thumbnail//purepng.com-renault-logorenaultgroupe-renaultautomobile-manufacturerrenault-automobilesrenault-logo-17015276106936zgwt.png" class="image-w"/></div>
        </div></div><div class="arrow" onclick="mySlideRight()"><img src="http://cerati.org/eoitecne/img/down.png" class="arrowright arimage"/></div>

    <p class=text1> SCEGLI IL TUO MARCHIO</p>



  </body>
</html>

.spacer{margin-top:100px;}
.alignleft {
    text-align:left;
}
.alignright {
    text-align:right;
}
#ext-1 {
    position:absolute;
    height:100%;
    z-index:5;
}
#ext-2 {
    position:absolute;
    height:100%;
    transform:scale(0.8) translateX(-20vw);
    z-index:4;}
#ext-2 .image-w{
    opacity:0.8
}
#ext-3 {
    position:absolute;
    height:100%;
    transform:scale(0.6) translateX(-30vw);
    z-index:3;}
#ext-3 .image-w{
    opacity:0.6
}
#ext-4 {
    position:absolute;
    height:100%;
    transform:scale(0.4) translateX(-20vw);
    z-index:2;}
#ext-4 .image-w{
    opacity:0.2
}
#ext-5
{
    position:absolute;
    height:100%;
    transform:scale(0.2);
    z-index:1;}
#ext-5 .image-w{
    opacity:0;
}
#ext-6 {
    position:absolute;
    height:100%;
    transform:scale(0.4) translateX(20vw);
    z-index:2;}
#ext-6 .image-w{
    opacity:0.2
}
#ext-7 {
    position:absolute;
    height:100%;
    transform:scale(0.6) translateX(30vw);
    z-index:3;}
#ext-7 .image-w{
    opacity:0.6
    
}
#ext-8
{
    position:absolute;
    height:100%;
    transform:scale(0.8) translateX(20vw);
    z-index:4;}
#ext-8 .image-w{
    opacity:0.8
}

.slider-cont {
    width:80%;
    position:relative;
    display:inline-block;
}

.image-slider {
    height:100%;
    position:absolute;
}

.cont-slider {
    display:inline-block;
    vertical-align:middle;
    transform-origin: top;
    transition:all 500ms cubic-bezier(0.71, 0.57, 0.01, 0.98);
}

.slider-layer {
    position:absolute;
    z-index:6;
    width:100%;
    height:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+26,0+50,0+77,1+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 77%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */


}

.test-slider {
    position:relative;
    width:30%;
    height:0;
    padding-bottom:30%;
    margin-left:35%;
}

.image-w {
    height:100%;
    position:absolute;
}

.arrow {
    display:inline-block;
    width:10%;
    opacity:0.3;
    vertical-align: top;
}
.arrow:hover{cursor:pointer}

.arimage {
    width:100%;
}

.arrowleft {
    transform:rotate(90deg)
}

.arrowright {
    transform:rotate(-90deg)
}

.flat-w-image {
    -webkit-filter:contrast(0) brightness(10);
    filter:contrast(0) brightness(10);
}

.text1 {
text-align: center;
color:grey;
font-family: Copperplate, Papyrus, fantasy;
font-size:80; 


}

window.onload=function(){
(function(d){/*  FUNZIONE EVENTI SWIPE DESTRA SINISTRA SU GIU'*/
 var
 ce=function(e,n){var a=document.createEvent("CustomEvent");a.initCustomEvent(n,true,true,e.target);e.target.dispatchEvent(a);a=null;return false},
 nm=true,sp={x:0,y:0},ep={x:0,y:0},
 touch={
  touchstart:function(e){sp={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchmove:function(e){nm=false;ep={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchend:function(e){if(nm){ce(e,'fc')}else{var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);if(Math.max(xr,yr)>20){ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')))}};nm=true},
  touchcancel:function(e){nm=false}
 };
 for(var a in touch){d.addEventListener(a,touch[a],false);}
})(document);
var h=function(e){console.log(e.type,e)};
document.body.addEventListener('fc',h,false);// 0-50ms vs 500ms with normal click
    /*SWIPE A DESTRA*/
    document.getElementById('slider-cont').addEventListener('swr',mySlideRight,false);
    /*SWIPE A SINISTRA*/
document.getElementById('slider-cont').addEventListener('swl',mySlideLeft,false);
/*document.body.addEventListener('swu',h,false);
document.body.addEventListener('swd',h,false);*/
}
function mySlideRight(){
    /*SE SWIPE SULLA DESTRA*/
        /*Seleziona tutte le immagini della slide*/
        var sli=document.getElementsByClassName('cont-slider');
    for(var i=0;i<sli.length;i++){
        /*Se è la prima immagine, diventa l'ultima*/
        if(sli[i].id=="ext-1"){sli[i].id='ext-8'}else{
            /*Se non è la prima immagine...*/
        var eid=sli[i].id;
        var strnum = eid.match(/\d+$/)[0];
        var num=parseInt(strnum);
            /*...scorre indietro di uno*/
            strnum--;
        sli[i].id='ext-'+strnum;
        }
    }
    
}
function mySlideLeft(){
    /*SE SWIPE SULLA SINISTRA*/
        /*Seleziona tutte le immagini della slide*/
    var sli=document.getElementsByClassName('cont-slider');
    for(var i=0;i<sli.length;i++){
        /*Se è l'ultima immagine, diventa la prima*/
        if(sli[i].id=="ext-8"){sli[i].id='ext-1'}else{
            /*Se non è l'ultima immagine...*/
        var eid=sli[i].id;
        var strnum = eid.match(/\d+$/)[0];
        var num=parseInt(strnum);
            /*...scorre avanti di unos*/
            strnum++;
        sli[i].id='ext-'+strnum;
        }
    }
}
function selectSliderElement(e){
    /*Se viene cliccato un elemento della slider, viene in primo piano*/
    var idd=e.id;
    var numstr = idd.match(/\d+$/)[0];
    var numid=parseInt(numstr);
    var sli=document.getElementsByClassName('cont-slider');
    if(numid==1){}else{
        var times=9-numid;
        for (var z=0;z<times;z++)
        for(var i=0;i<sli.length;i++){
        /*Se è l'ultima immagine, diventa la prima*/
        if(sli[i].id=="ext-8"){sli[i].id='ext-1'}else{
            /*Se non è l'ultima immagine...*/
        var eid=sli[i].id;
        var strnum = eid.match(/\d+$/)[0];
        var num=parseInt(strnum);
            /*...scorre avanti di unos*/
            strnum++;
        sli[i].id='ext-'+strnum;
        }
    }}
    }