impostare scorrimento automatico in slideshow
Ciao a tutti, dovrei impostare ad una slideshow lo scorrimento automatico. ho gia creato il css e l'html. che cosa devo aggiungere per far diventare automatico lo scorrimento?
GRAZIE
css:
Codice:
#slider {width: 640px;
height: 480px;
margin: 35px auto 0;
position: relative;
background: #FFF;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}
#slider:before, #slider:after {content: '';
position: absolute;
width: 60%;
height: 20px;
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1}
#slider:after {left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg)}
#slider ul {width: 140px;
height: 30px;
padding: 0 0 0 0;
position: absolute;
z-index: 9;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: 8px}
#slider ul li:first-child {margin-left: 16px}
#slider ul li {float: left;
margin-right: 12px;
margin-top: 14px}
#slider ul li:last-child {margin-right: 0}
#slider ul li a {width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #AAA;
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.6), 0 1px 1px 0 white;
border-radius: 50%}
#slider ul li a:hover {background: #888}
#slider img {position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease}
#slider img:target {opacity: 1}
#slider img#five {opacity: 1}
#slider img:not(:target), #slider img:target ~ img#five {opacity: 0}
#slider ul li a[href="#five"] {background: #777}
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {background: #777}
#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {background: #AAA}
html:
Codice HTML:
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>prova</title>
<link href="slider.css" rel="stylesheet" type="text/css">
</head><body>
<br>
<div id="slider">
<!-- Sildes -->
<img id="one" src="immagini/img1.jpg" />
<img id="two" src="immagini/img2.jpg" />
<img id="three" src="immagini/img3.jpg" />
<img id="four" src="immagini/img4.jpg" />
<img id="five" src="immagini/img5.jpg" />
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</div>
<br>
</body></html>
GRAZIE:=)::=):
