impostare scorrimento automatico in slideshow

29-04-2013, 21.45.25

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

Discussione: impostare scorrimento automatico in slideshow

LinkBack

Strumenti discussione

Display

impostare scorrimento automatico in slideshow

Regole di scrittura