Нужна Ваша помощь в автоматической прокрутке слайдера
Имеется слайдер с вертикальной прокруткой, в котором изображения автоматически не изменяются, а только по касании мыши на текстовый блок сбоку. Помогите, пожалуйста, сделать циклическую автоматическую прокрутку.
<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); } }); }); |
Sergyk85,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<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); } }); }); |
Часовой пояс GMT +3, время: 22:52. |