PROVAAUTO by @Gianluca_Pet - Codewith.it

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

References

sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<td>Definisce una cella di una tabella HTML.
formnovalidateImpedisce la convalida di un singolo elemento input
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<title>Definisce il titolo della pagina web.
<table>Tag primario per la creazione di tabelle

Users

Log in to search for users

Explore

Find inspiration

esercitazione 1

LB Campodarsego(2)(2)(2)

Descr Breve UNIONWOOD 5mm

Leggere Lolita a Teheran Azar Nafi

Esercizi 05/03/2024 es1

CodeALongButton

Cambia colore testo JS

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;
        }
    }}
    }