Как сделать простое слайд-шоу на Javascript, при помощи jQuery

Этот совет поможет вам создать простое слайд-шоу, используя javascript и jQuery. Комментарии в коде расскажут Вам, какие именно действия происходят на данный момент в программе.


Дата: 03.10.2010 г.

Рейтинг: 0

Метки: Javascript, jQuery, slideshow, слайд-шоу, предварительная загрузка изображений

Пошаговая инструкция:

Хотите написать простое слайд-шоу, используя javascript и jQuery? Попробуйте мое решение.

Сомневаетесь в том, что поймете как это работает? Читайте подробные комментарии и они Вам помогут разобраться в коде!

<!--При помощи CSS задаем некоторые стилевые параметры элементам на страничке-->
<style type="text/css">
    #Global{
    background-color: lightblue;
    border: dotted black 2px;
    padding: 20px;
    margin: 10px;
    }
    #subGlobal {
    width: 200px;
    text-align:center;
    }
    #subGlobal img{
    margin: 2px;
    margin-bottom: 30px;
    width: 40px;
    height: 40px;
    }
    p   {
    margin: 0;
    margin-right: 2px;
    padding: 5px;
    width: 100px;
    text-align: center;
    display: inline;
    border: dotted 1px black;
    color: white;
    font-family: Tahoma, Arial;
    font-size: 18px;
    font-weight: bold;
    }
    #Right {
    background-color:black;
    cursor:pointer;
    }
    #Left {
    background-color:black;
    cursor:pointer;
    }
    #Hidden{
    margin-left: -10000px;
    }
</style>
<!--Конец описания стилей-->
<script type="text/javascript" src="../jquery/jquery142.js"></script><!--Подключаем библиотеку jQuery-->
<script type="text/javascript">

    var massivFoto = ['../img/photo0.jpg', //Задаем массив "massivFoto". Элементы массива - относительные адреса картинок.Нумерация элементов в массиве начинается с нуля.
                  '../img/photo1.jpg',
              '../img/photo2.jpg',
              '../img/photo3.jpg',
              '../img/photo4.jpg',
              '../img/photo5.jpg'];
    

</script>
        <div id="Global"><!--контейнер <DIV> с идентификатором "Global"-->
            <div id="subGlobal"><!--контейнер <DIV> с идентификатором "subGlobal". Сюда и будем помещать наши картинки.-->
            </div>
               <p id="Left"> << </p>  <!-- "кнопочка" Налево-->
               <p id="Right"> >> </p><!-- "кнопочка" Направо-->
                            <!-- На самом деле, это не кнопки,а текстовые абзацы. Мы просто их стилизовали под кнопки при помощи CSS.-->
        </div>
            <script type="text/javascript">
                for (k = 0; k<3; k++) {
                     $('#subGlobal').append('<img src=' + massivFoto[k] + ' alt=Фото>');//Используя цикл FOR, выведем три картинки в контейнер <DIV> с идентификатором #subGlobal.
                                }
//Начало функции "moveLeft"
            function moveLeft() {
                var removedItem = massivFoto.shift(); //При помощи метода SHIFT() удаляем первый элемент массива "massivFoto" и добавляем этот элемент в переменную "removedItem"
                massivFoto.push(removedItem); //При помощи метода PUSH() добавляем в конец массива первый элемент, который до этого сохранили в переменной "removedItem"
                for (k = 0; k<1; k++) {
                     $('#subGlobal').html('<img src=' + massivFoto[k] + ' alt=Фото>');//В контейнер с идентификатором "#subGlobal" выводим первую картинку (нулевой элемент) из массива "massivFoto"
                                }
                for (k = 1; k<3; k++) {
                     $('#subGlobal').append('<img src=' + massivFoto[k] + ' alt=Фото>');//В контейнер с идентификатором "#subGlobal" выводим последующие картинки (начиная с первого элемента и до второго,включительно) из массива "massivFoto".
                                }
            }
//Конец функции "moveLeft"
//Начало функции "moveRight"
            function moveRight() {
                var removedItem = massivFoto.pop();//При помощи метода POP() удаляем последний элемент массива "massivFoto" и добавляем этот элемент в переменную "removedItem"
                massivFoto.unshift(removedItem);//При помощи метода UNSHIFT() добавляем в начало массива последний элемент, который до этого сохранили в переменной "removedItem"
                for (k = 0; k<1; k++) {
                     $('#subGlobal').html('<img src=' + massivFoto[k] + ' alt=Фото>');
                                }
                for (k = 1; k<3; k++) {
                     $('#subGlobal').append('<img src=' + massivFoto[k] + ' alt=Фото>');
                                }
            }
//Конец функции "moveRight"
            $('#Left').click(moveLeft); //при нажатии на "кнопку" "Налево" вызывается функция "moveLeft"
            $('#Right').click(moveRight); //при нажатии на "кнопку" "Направо" вызывается функция "moveRight"            
            </script>
<!--Один из способов предварительной загрузки изображений-->
<div id="Hidden">
<img src="../img/photo0.jpg">
<img src="../img/photo1.jpg">
<img src="../img/photo2.jpg">
<img src="../img/photo3.jpg">
<img src="../img/photo4.jpg">
<img src="../img/photo5.jpg">
</div>


Просмотреть, что у Вас должно получиться можно, проследовав по ссылке:

Посмотреть


Архив с исходным кодом и файлами изображений можно скачать по ссылке:[attachment=6]



Похожие статьи: