blog

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

$(document).ready(function() { 
   $('#s3slider').s3Slider({ 
      timeOut: 4000 
   });
});

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Scrivi qui il testo</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Scrivi qui il testo</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

#s3slider { 
   width: 400px; 
   height: 300px;
   position: relative;
   overflow: hidden;
}
 
#s3sliderContent {
   width: 400px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
 
.s3sliderImage {
   float: left;
   position: relative;
   display: none;
}
 
.s3sliderImage span {
   position: absolute;
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #fff;
   display: none;
   top: 0;
 
   /*
       top: 0; -> il box con il testo verrà visualizzato in alto
       bottom: 0; -> il box con il testo verrà visualizzato in basso
   */
}
 
.clear {
   clear: both;
}