Библиотека Javascript. SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<head>
<title>Автосмена блока текста с фото</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Fang | http://www.webdeveloper.com/forum/showthread.php?t=191419Licensed under: Public Domain
 */

function postNews() {
  aLI=document.getElementById('news').getElementsByTagName('li');
  for(var i=0; i<aLI.length; i++)  {
    aLI[i].style.display="none";
    aLI[i].getElementsByTagName('p')[0];
  }
  rotate(aLI.length-1);
};

var aLI=[];
var timerRUN=null;
var Speed=3000; // change as required

function rotate(idx) {
  aLI[idx].style.display="none";
  idx=(idx<aLI.length-1)? ++idx : 0;
  aLI[idx].style.display="block";
  timerRUN=setTimeout('rotate('+idx+')', Speed);
}

function inView() {
  var newsItem=0;
  for(var i=0; i<aLI.length; i++) {
    if(aLI[i].style.display=="block") {newsItem= i;}
  }
  return newsItem;
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  postNews();
});

</script>
<style>
#news li {
  width: 200px;
  overflow: hidden;
  border: 1px solid #000;
  list-style-type: none;
  color: #000;
  background: #ddd;
  display: none;
}

#news li img {
  display: block;
}

#news li p {
  margin: 0;
  padding: 3px;
  font-size: .8em;
  border-top: 1px solid #000;
}

</style>
</head>

<ul id="news">
  <li><img src="00001.jpg" width="200" height="250" alt="Picture 1">
    <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. [<a href="#" onclick="return false;">read more</a>]</p>
  </li>
  <li><img src="00002.jpg" width="200" height="250" alt="Picture 2">
    <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. [<a href="#" onclick="return false;">read more</a>]</p>
  </li>
  <li><img src="00003.jpg" width="200" height="250" alt="Picture 3">
    <p>Mirum est notare quam littera gothica, quam nunc putamus parum claram. [<a href="#" onclick="return false;">read more</a>]</p>
  </li>
</ul>

</body>
</html>