<style type="text/css" media="screen">
  #slider {
  width: 500px; /* important to be same as image width */
  height: 260px; /* important to be same as image height */
  position: relative; /* important */
  overflow: hidden; /* important */
  }
  #sliderContent {
  width: 450px; /* important to be same as image width or wider */
  position: absolute;
  top: 0;
  margin-left: 0;
  list-style-type: none;
  }
  .sliderImage {
  float: left;
  position: relative;
  display: none;
  }
  .sliderImage .top {
  position: absolute;
  font: 10px/15px Arial, Helvetica, sans-serif;
  padding: 10px 13px;
  width: 500px;
  background-color: #000;
  filter: alpha(opacity=90);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  color: #fff;
  display: none;
  }
  .clear {
  clear: both;
  }
  .sliderImage span strong {
  font-size: 2.1em;
  }
  .top {
  top: 0;
  left: 0;
  }
  .bottom {
  bottom: 0;
  left: 0;
  }

  </style>
<script src="/js/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
  $('#slider').s3Slider({
  timeOut: 4000
  });
  });
  </script>

<div id="slider">
<ul id="sliderContent">

<!-- <Новость 1> -->
<li class="sliderImage" style="display: none">
<a href="Ссылка на новость">
<img src="Картинка" alt=""/>
</a>
<span class="top" style="display: inline">
<strong>Название новости</strong>
<br/>
Краткое описание (макс. 75 символов)
</span>
</li>
<!-- </Новость 1> -->

<!-- <Новость 2> -->
<li class="sliderImage" style="display: none">
<a href="Ссылка на новость">
<img src="Картинка" alt=""/>
</a>
<span class="top" style="display: none">
<strong>Название новости</strong>
<br/>
Краткое описание (макс. 75 символов)
</span>
</li>
<!-- </Новость 2> -->

<div class="clear sliderImage"/>

</ul>
</div>