Очень простой слайдер изображений/слайд-шоу с левой и правой кнопкой. Нет автовоспроизведения

Прочитав ваш комментарий к моему предыдущему ответу, я подумал, что могу поместить это как отдельный ответ.

Хотя я ценю ваш подход к попытке сделать это вручную, чтобы лучше понять jQuery, я все же подчеркиваю достоинства использования существующих фреймворков.

Тем не менее, вот решение. Я изменил некоторые ваши css и HTML, чтобы мне было легче работать с ними.

РАБОТАЮЩАЯ СКРИПКА JS - http://jsfiddle.net/HsEne/15/

это jquery

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

    $('#button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });




});

Итак, теперь пояснение.
Этап 1
1) Загрузите скрипт в готовый документ.

2) Возьмите первый слайд и добавьте к нему класс «активный», чтобы мы знали, с каким слайдом мы имеем дело.

3) Скрыть все слайды и показать активный слайд. Итак, теперь слайд № 1 — это блок отображения, а все остальные — display:none;

Этап 2 Работа с событием "кнопка-следующий щелчок".
1) Удалите текущий активный класс со слайда, который будет исчезать, и присвойте ему класс oldActive, чтобы мы знали, что он находится на своем месте. выход.

2) Далее следует оператор if, чтобы проверить, находимся ли мы в конце слайд-шоу и нужно ли снова вернуться к началу. Он проверяет, является ли oldActive (то есть исходящий слайд) последним дочерним элементом. Если это так, вернитесь к первому потомку и сделайте его «активным». Если это не последний дочерний элемент, просто возьмите следующий элемент (используя .next() ) и активируйте его класс.

3) Мы удаляем класс oldActive, потому что он больше не нужен.

4) затухание всех слайдов

5) затухание активных слайдов

Шаг 3

То же, что и на втором шаге, но с использованием некоторой обратной логики для обхода элементов в обратном направлении.

Важно отметить, что есть тысячи способов добиться этого. Это всего лишь мой взгляд на ситуацию.

Зачем пытаться изобретать велосипед? Существуют более легкие решения для слайд-шоу на jQuery, чем вы могли бы ткнуть палкой, и кто-то уже проделал за вас тяжелую работу и подумал о проблемах, с которыми вы можете столкнуться (кросс-браузерная совместимость и т. д.).

jQuery Cycle — одна из моих любимых облегченных библиотек.

То, чего вы хотите достичь, может быть достигнуто всего за

    jQuery("#slideshow").cycle({
    timeout:0, // no autoplay
    fx: 'fade', //fade effect, although there are heaps
    next: '#next',
    prev: '#prev'
    });

JSFIDDLE, ЧТОБЫ ПОСМОТРЕТЬ, НАСКОЛЬКО ЭТО ПРОСТО

Очень простой код для создания слайдера jquery Вот два div: первый — это средство просмотра слайдера, а второй — контейнер списка изображений. Просто скопируйте код и настройте с помощью css.

    <div class="featured-image" style="height:300px">
     <img id="thumbnail" src="01.jpg"/>
    </div>

    <div class="post-margin" style="margin:10px 0px; padding:0px;" id="thumblist">
    <img src='01.jpg'>
    <img src='02.jpg'>
    <img src='03.jpg'>
    <img src='04.jpg'>
    </div>

    <script type="text/javascript">
            function changeThumbnail()
            {
            $("#thumbnail").fadeOut(200);
            var path=$("#thumbnail").attr('src');
            var arr= new Array(); var i=0;
            $("#thumblist img").each(function(index, element) {
               arr[i]=$(this).attr('src');
               i++;
            });
            var index= arr.indexOf(path);
            if(index==(arr.length-1))
            path=arr[0];
            else
            path=arr[index+1];
            $("#thumbnail").attr('src',path).fadeIn(200);
            setTimeout(changeThumbnail, 5000);  
            }
            setTimeout(changeThumbnail, 5000);
    </script>