Хотите написать простое слайд-шоу, используя 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>
<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>
Просмотреть, что у Вас должно получиться можно, проследовав по ссылке:
Посмотреть
Архив с исходным кодом и файлами изображений можно скачать по ссылке:
