Доброго Всем Времени Суток. Помогите, пожалуйста, разобраться в проблеме.
Сделал слайд-шоу. Самое обычное. Php вывело мне содержимое папки images в виде картинок и иконок "о", при нажатии на которое должен осуществляться переход к конкретному изображению
Песочница
<!Doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
#slideshow {
overflow: hidden;
}
#slideshow img {
position: absolute;
display: none;
top: -6px;
left: -6px;
}
#slideshow #play, #slideshow #pause, #slideshow #next, #slideshow #previous {
position: absolute;
z-index: 200;
}
#slideshow #play {
top: 8px;
left: 0;
text-align: right;
}
#slideshow #pause {
top: 8px;
right: 0;
text-align: left;
}
#slideshow #next {
right: 8px;
bottom: 5px;
}
#slideshow #previous {
left: 8px;
bottom: 5px;
}
#thumbs {
position: absolute;
z-index: 200;
text-align: center;
bottom: 8px;
left: 10%;
}
#thumbs span {
padding: 1px;
}
#slideshow {
width: 798px;
height: 448px;
}
#slideshow #play, #slideshow #pause {
width: 49.5%;
}
#thumbs {
width: 80%;
}
#slideshow {
border: 2px dashed #9add23;
}
#thumbs, #slideshow #play, #slideshow #pause, #slideshow #next, #slideshow #previous {
color: #c330c6;
}
.active {
color: #9add23;
}
</style>
<script>
function slideshow(){
if ($('#slideshow').length>0){
play_slideshow();
$('#slideshow #next').click(function(){ next_slide() });
$('#slideshow #previous').click(function(){ previous_slide() });
$('#slideshow #play').click(function(){ play_slideshow() });
$('#slideshow #pause').click(function(){ pause_slideshow(s_interval) });
$('#slideshow #thumbs span').click(function(){ switch_to_slide( $(this).attr('id') ) });
}
}
function next_slide(){
var images = $('#slideshow img').length;
id = get_id(images);
if (id+1 == images){ var next = 0 }
else { var next = id+1 }
$('#slideshow img#'+id).fadeOut(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+id).removeAttr('class');
$('#slideshow img#'+next).fadeIn(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+next).addClass('active');
}
function previous_slide(){
var images = $('#slideshow img').length;
id = get_id(images);
if (id==0){ var previous = images-1 }
else { var previous = id-1 }
$('#slideshow img#'+id).fadeOut(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+id).removeAttr('class');
$('#slideshow img#'+previous).fadeIn(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+previous).addClass('active');
}
function play_slideshow() {
setTimeout(next_slide, 1000);
return s_interval = setInterval(next_slide, 2200)
}
function pause_slideshow(s_interval) {
clearInterval(s_interval)
}
function get_id(images){
for(i=0;i<images;i++){
if($('#slideshow img#'+i).css('display')=='block'){ return i }
}
}
function switch_to_slide(next){
var images = $('#slideshow img').length;
$('#slideshow img#'+1).fadeOut(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+1).removeAttr('class');
$('#slideshow img#'+next).fadeIn(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+next).addClass('active');
}
$(document).ready(function() { slideshow() });
</script>
</head>
<body>
<div id="slideshow">
<span id="play">play</span><span id="pause">pause</span><span id="next">next</span><span id="previous">previous</span>
<img id="0" src="images/slide(1).jpg" width="800" height="450" style="display: block;">
<img id="1" src="images/slide(2).jpg" width="800" height="450" style="display: none;">
<img id="2" src="images/slide(3).jpg" width="800" height="450" style="display: none;">
<img id="3" src="images/slide(4).jpg" width="800" height="450" style="display: none;">
<img id="4" src="images/slide(5).jpg" width="800" height="450" style="display: none;">
<img id="5" src="images/slide(6).jpg" width="800" height="450" style="display: none;">
<img id="6" src="images/slide(7).jpg" width="800" height="450" style="display: none;">
<img id="7" src="images/slide(8).jpg" width="800" height="450" style="display: none;">
<img id="8" src="images/slide(9).jpg" width="800" height="450" style="display: none;">
<div id="thumbs">
<span id="0" class="active">o</span>
<span id="1" 0="">o</span>
<span id="2" 0="">o</span>
<span id="3" 0="">o</span>
<span id="4" 0="">o</span>
<span id="5" 0="">o</span>
<span id="6" 0="">o</span>
<span id="7" 0="">o</span>
<span id="8" 0="">o</span>
</div>
</div>
</body>
</html>
Но при нажатии на эту иконку "прыжка" к конкретному изображению, этой иконке как и должно определяется класс active, а также появляется нужная картинка и замирает на месте, но слайд-шоу не работает пока не дойдет оригинальное (начатое функцией play) действие до данного слайда. То есть слайд-шоу идет 0,1... я нажму 4 (4 иконка стала активной и 4 изображение появилось и замерло)... но слайд-шоу идет далее 2,3,4... (видно по меняющимся иконкам, картинка остается 4 все время)... и только тут начинается анимация после того как я нажал на 4...
Помогите, пожалуйста, разобраться в чем проблема(((