Имеется слайдер с вертикальной прокруткой, в котором изображения автоматически не изменяются, а только по касании мыши на текстовый блок сбоку. Помогите, пожалуйста, сделать циклическую автоматическую прокрутку.
<div id="content">
<ul class="infoPanel">
<li> <a href="#url" class="infoLink current"><img alt="" src="images/image1.jpg" style="opacity: 1;"> <span>Ведьмак 2: Убийцы королей</span>
<p>Игра 2011 года</p>
</a>
<div style="display: block;"> <img alt="" src="images/image1.jpg"> </div>
</li>
<li> <a href="#url" class="infoLink"><img alt="" src="images/image2.jpg" style="opacity: 0.8;"><span>Dragon Age: Origins</span>
<p>Игра 2009 года</p>
</a>
<div style="display: none;"> <img alt="" src="images/image2.jpg"> </div>
</li>
<li> <a href="#url" class="infoLink"><img alt="" src="images/image3.jpg" style="opacity: 0.8;"><span>TES: Skyrim</span>
<p>11.11.11</p>
</a>
<div style="display: none;"> <img alt="" src="images/image3.jpg"> </div>
</li>
</ul>
</div>
Такой вот код находится в файле slideshow.js:
$(document).ready(function() {
$(".infoPanel li a img").fadeTo(1,0.8);
$(".infoPanel li a").eq(0).addClass("current");
$("a.current").next().fadeIn();
$(".infoPanel li a.current img").fadeTo(250,1);
$(".infoLink").mouseover(function() {
if (this.className.indexOf("current") == -1) {
$("a.current").next().fadeOut();
$(".infoPanel li a.current img").fadeTo(1,0.8);
$("a.current").removeClass("current");
$(this).addClass("current");
$("a.current").next().fadeIn();
$(".infoPanel li a.current img").fadeTo(250,1);
}
});
});