salve ragazzi , ho un piccolo problema ... nonostante abbia visto le innumerevoli discussioni riguardo a questo argomento , non riesco a capire come eseguire passo passo il tutto ... avendo programmato con C++ e Php , non riesco a comprendere bene l'uso di javascript.... quindi ora vi posto il mio codice e vedete dove sono arrivato ... avrei bisogno un aiuto su come creare questo benedetto slideshow , anche senza effetto fade !
Codice:
HOME.HTML
<html>
<head>
<title>Maturità2k17</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="nav">
<ul>
<li><a href="otherpage/italiano.html">ITALIANO</a></li>
<li><a href="otherpage/storia.html">STORIA</a></li>
<li><a href="otherpage/informatica.html">INFORMATICA</a></li>
<li><a href="otherpage/tecnologia.html">TECNOLOGIA</a></li>
<li><a href="otherpage/sistemi.html">SISTEMI</a></li>
<li><a href="otherpage/matematica.html">MATEMATICA</a></li>
<li><a href="otherpage/inglese.html">INGLESE</a></li>
</ul>
</div>
<div id="screen">
<img src="image/Pirandello.jpg" id="imag">
<img src="image/Mussolini.jpg" id="imag">
<img src="image/CharlesRanlettFlint.jpg" id="imag">
<img src="image/RasmusLerdof.jpg" id="imag">
<img src="image/ClaudeShannon.jpg" id="imag">
<img src="image/archimede.jpg" id="imag">
<img src="image/fbi.jpg" id="imag">
</div>
</body>
</html>
STYLE.CSS
body {
font-family:calibri;
}
ul {
display: flex;
margin-bottom: 0;
margin-top:0;
list-style: none;
padding-left: 0;
border: solid 1px #ffffff;
}
li {
padding:4px 2px 4px 10px;
font-weight:bold;
color:white;
text-align:center;
width:150px;
}
li:hover {
background-color: #f8f8f8;
color:black;
}
a:link, a:visited {
text-decoration:none;
color: white;
background-color: transparent;
}
a:hover, a:active {
text-decoration:none;
color: black;
}
#nav {
position:absolute;
top:0px;
left:100px;
right:100px;
bottom:95px;
}
#imag {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg); position: fixed; z-index: -1;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#screen {
overflow: hidden;
}
) . 
