Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Нужна Ваша помощь в автоматической прокрутке слайдера (https://javascript.ru/forum/project/64867-nuzhna-vasha-pomoshh-v-avtomaticheskojj-prokrutke-slajjdera.html)

Sergyk85 10.09.2016 09:57

Нужна Ваша помощь в автоматической прокрутке слайдера
 
Имеется слайдер с вертикальной прокруткой, в котором изображения автоматически не изменяются, а только по касании мыши на текстовый блок сбоку. Помогите, пожалуйста, сделать циклическую автоматическую прокрутку.

<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);
}
});
});

рони 10.09.2016 10:05

Sergyk85,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Sergyk85 10.09.2016 10:36

<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.