Главная
О сайте
Гостевая
Вход
Гость !!! | RSS
Сегодня на сайте
Новые сообщения Участники Правила форума Поиск RSS
  • Страница 1 из 1
  • 1
Модератор форума: Khufu  
Форум » Скрипты » Эффекты..., трюки... » Слайд-шоу на JavaScript
Слайд-шоу на JavaScript
« Azzazil666 » Дата: Воскресенье, 05 Сентября 2010, 01:28:09 | Сообщение # 1
Князь - Мира Сия
Azzazil666
«Администратор»
Сообщений: 418
Замечания: ±
У вас
Статус Настроения: [редактировать]
Отсутствует

 Слайд-шоу - попеременная смена картинок в определенном порядке автоматически или вручную.

Все достаточно просто: создаем массив с картинками и манипулируем ими как объектами:

Code
<script>

var slide = new Array;
var pictureName = new Array("flower[1].jpg", "flower[2].jpg", "flower[3].jpg", "flower[4].jpg");

for (var i = 0; i < pictureName.length; i++) {

slide[i] = new Image();
slide[i].src = pictureName[i];
}

var m = new Array(0, 100);
var nextImage = 0;
var t = "";

function next(step) {

if (t != "") return;

m[0] = 0;
m[1] = 100;

nextImage = nextImage + step;

if (nextImage == pictureName.length) {

nextImage = 0;
}

if (nextImage == -1) {

nextImage = pictureName.length - 1;
}

document.getElementById("after").src = slide[nextImage].src;

change_slide();

}

function change_slide() {

m[0] += 1;
m[1] -= 1;

document.getElementById("before_div").style.opacity = m[1]/100;
document.getElementById("after_div").style.opacity = m[0]/100;
document.getElementById("after_div").style.filter="alpha(opacity="+m[0]+")";
document.getElementById("before_div").style.filter="alpha(opacity="+m[1]+")";

t = setTimeout("change_slide()",5);
if (m[0] > 98) {

clearTimeout(t);
document.getElementById("before").src = slide[nextImage].src;
document.getElementById("before_div").style.opacity = 100;
document.getElementById("before_div").style.filter="alpha(opacity=0)";
t = "";
}

}

</script>

Code
<style>

.pic { position: absolute; top: 100px; left: 100px }
a.navigation { text-decoration: none }

</style>

Code
<div id="after_div" class="pic">
<img id="after" src="flower[2].jpg">
</div>
<div id="before_div" class="pic">
<img id="before" src="flower[1].jpg">
</div>

<a href="javascript:next(-1)" class="navigation"><< Назад</a> <a href="javascript:next(1)" class="navigation">Вперед >></a>




Не идите за мной – заблудитесь!!!
 
« Azzazil666 » Дата: Воскресенье, 05 Сентября 2010, 04:58:04 | Сообщение # 2
Князь - Мира Сия
Azzazil666
«Администратор»
Сообщений: 418
Замечания: ±
У вас
Статус Настроения: [редактировать]
Отсутствует
Слайдшоу на JavaScript. Часть II



В данном скрипте объединены все предыдущие наработки в области разработки полноценного слайд-шоу на JavaScript.

CSS:

Code
<style>
img { border: 1px solid #000 }
.pic { position: absolute; top: 20px; left: 20px }
</style>

JS:
Code
<script>
var pic = new Image();
var timer;
var first_pic = 100;
var second_pic = 0;
var sec = 0;
var currentPictureId = 0;
var pictures = new Array("rose.gif", "daisywheel.gif", "lotus.gif", "lilies.gif");
var total_pictures = pictures.length;
var slideshow_started = false;

var disabled_opacity = false;
var step_opacity = 1;
var step_time = 5;

var sleep_time = 1000;

function changePicture(pictureId) {

if (currentPictureId == pictureId || first_pic != 100) {

return false;
}

currentPictureId = pictureId;

pic = new Image();
pic.src = "images/" + pictures[pictureId];
timer = setTimeout("checkLoading()", 1000);
document.getElementById("btnPrev").disabled = true;
document.getElementById("btnNext").disabled = true;
}

function checkLoading() {

if (pic.complete == true) {

if (disabled_opacity == true) {

document.getElementById("before").src = pic.src;
document.getElementById("btnPrev").disabled = false;
document.getElementById("btnNext").disabled = false;
sleep(sleep_time);

if (slideshow_started == true) {

ShowNextImage();
}

} else {

changeSlide();
document.getElementById("loading_text").innerHTML = " ";
document.getElementById("after").src = pic.src;
timer = setTimeout("changeSlide()", step_time);
}

} else {

timer = setTimeout("checkLoading()", 500);
document.getElementById("loading_text").innerHTML = "Loading, please wait...";
}
}

function sleep(delay) {

var start = new Date().getTime();
while (new Date().getTime() < start + delay);
}

function changeSlide() {

first_pic = first_pic - step_opacity;
second_pic = second_pic + step_opacity;

document.getElementById("before_div").style.opacity = first_pic / 100;
document.getElementById("after_div").style.opacity = second_pic / 100;
document.getElementById("after_div").style.filter = "alpha(opacity=" + second_pic + ")";
document.getElementById("before_div").style.filter = "alpha(opacity=" + first_pic +")";

if (second_pic > 98) {

clearTimeout(timer);
document.getElementById("before").src = pic.src;
document.getElementById("before_div").style.opacity = 100;
document.getElementById("before_div").style.filter = "alpha(opacity=0)";
document.getElementById("after_div").style.opacity = 0;
document.getElementById("after_div").style.filter = "alpha(opacity=100)";
first_pic = 100;
second_pic = 0;
document.getElementById("btnPrev").disabled = false;
document.getElementById("btnNext").disabled = false;

if (slideshow_started == true) {

ShowNextImage();
}

} else {

timer = setTimeout("changeSlide()", step_time);
}
}

function ShowPreviousImage() {

var pictureId = (currentPictureId == 0) ? total_pictures - 1 : currentPictureId - 1;
changePicture(pictureId);
}

function ShowNextImage() {

var pictureId = (currentPictureId + 1 == total_pictures) ? 0 : currentPictureId + 1;
changePicture(pictureId);
}

function StartSlideShow() {

if (slideshow_started == false) {

slideshow_started = true;
document.getElementById("startSlideshow").value = "Остановить слайдшоу";
ShowNextImage();

} else {

slideshow_started = false;
document.getElementById("startSlideshow").value = "Старт слайдшоу";
}
}

</script>

Сам Код:
Code
<table cellpadding="10">
<tr>
<td colspan="4" width="800" height="600">

<div id="after_div" class="pic">
<img id="after" src="" width="800" height="600">
</div>
<div id="before_div" class="pic">
<img id="before" src="images/rose.gif" width="800" height="600">
</div>
</td>
</tr>
<tr>
<td colspan="4"><br><div id="loading_text" align="center"> </div></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="Назад" id="btnPrev" onclick="ShowPreviousImage()">
<input type="button" value="Старт слайдшоу" id="startSlideshow" onclick="StartSlideShow()">
<input type="button" value="Вперед" id="btnNext" onclick="ShowNextImage()">
</td>
</tr>
</table>

Описание.
Наиболее важными настройками работы слайдшоу является:

var pictures = new Array("rose.gif", "daisywheel.gif", "lotus.gif", "lilies.gif");

Данный массив представляет собой набор картинок, которые будут отображаться в слайд-шоу.

var step_opacity = 1;
var step_time = 5;

Данные параметры управляют скоростью и временем плавной смены картинки. Увеличение параметра step_opacity приведет к тому, что шаг смены прозрачности будет расти и картинки будут обновляться быстрее.

var disabled_opacity = false;
var sleep_time = 1000;

Два важных параметра. Если вы хотите, что бы картинки менялись без эффекта плавного перехода, просто измените

disabled_opacity = true;

Параметр sleep_time - время задержки смены картинок в режиме слайд-шоу (только для disabled_opacity = true).




Не идите за мной – заблудитесь!!!
 
« Azzazil666 » Дата: Воскресенье, 05 Сентября 2010, 06:53:31 | Сообщение # 3
Князь - Мира Сия
Azzazil666
«Администратор»
Сообщений: 418
Замечания: ±
У вас
Статус Настроения: [редактировать]
Отсутствует
Слайдшоу на JavaScript. Часть III

В данном пункте, будет затронута одна из самых проблематичных тем; - позиционирование картинок в слайд-шоу.

В предыдущих Слайд-шоу на JavaScript и Слайд-шоу на JavaScript. Часть II, были раскрыты многие аспекты разработки слайд-шоу на JavaScript. Однако все они имели один большой недостаток - абсолютное позиционирование слайд-шоу. То есть, необходимо было задавать координаты размещения слайд-шоу. В этом случае, приводится пример, как сделать относительное позиционирование.

Сам скрипт вынесен в отдельный файл slide.js .
Привожу код файла index.html и slide.js:

Код файла index.html:

Code
<style>

.pic { position: absolute; top: 0px; left: 0px; display: none }

</style>

<table width="100%" height="100%">
<tr valign="center">
<td width="100%" height="100%" align="center">

<div id="after_div">
<img id="after" src="" width="300" height="220">
</div>
<div id="before_div" class="pic">
<img id="before" src="demo/london.jpg" width="300" height="220">
</div>

</td>
</tr>
</table>

<script src="slide.js"></script>
<script>

document.getElementById("after_div").style.display = "block";

StartSlideShow();

window.onresize = function () {

WinResize();
}
window.onload = function() {

WinResize();
}

function WinResize() {

pos = findPos(document.getElementById("after"));

document.getElementById("before_div").style.top = pos[1] + "px";
document.getElementById("before_div").style.left = pos[0] + "px";
document.getElementById("before_div").style.display = "block";
}

</script>

Код файла slide.js:

Code
var pic = new Image();
var timer;
var first_pic = 100;
var second_pic = 0;
var sec = 0;
var currentPictureId = 0;
var slideshow_started = false;

var disabled_opacity = false;
var step_opacity = 1;
var step_time = 200;

// Путь к слайдам
var picture_dir = "demo/";

// Список слайдов
var pictures = new Array("london.jpg", "berlin.jpg", "amsterdam.jpg", "venice.jpg", "milan.jpg");
var total_pictures = pictures.length;

var before = document.getElementById("before_div");
var after = document.getElementById("after_div");

function changePicture(pictureId) {

if (currentPictureId == pictureId || first_pic != 100) {

ShowNextImage();
return false;
}

currentPictureId = pictureId;

pic = new Image();
pic.src = picture_dir + pictures[pictureId];
timer = setTimeout("checkLoading()", 1000);
}

function checkLoading() {

if (pic.complete == true) {

if (disabled_opacity == true) {

document.getElementById("before").src = pic.src;
if (slideshow_started == true) {

ShowNextImage();
}

} else {

changeSlide();
document.getElementById("after").src = pic.src;
timer = setTimeout("changeSlide()", step_time);
}

} else {

timer = setTimeout("checkLoading()", 1000);
}
}

function changeSlide() {

first_pic = first_pic - step_opacity;
second_pic = second_pic + step_opacity;

before.style.opacity = first_pic / 100;
after.style.opacity = second_pic / 100;
after.style.filter = "alpha(opacity=" + second_pic + ")";
before.style.filter = "alpha(opacity=" + first_pic +")";

if (second_pic > 99) {

clearTimeout(timer);
document.getElementById("before").src = pic.src;
before.style.opacity = 100;
before.style.filter = "alpha(opacity=0)";
after.style.opacity = 0;
after.style.filter = "alpha(opacity=100)";
first_pic = 100;
second_pic = 0;

if (slideshow_started == true) {

ShowNextImage();
}

} else {

timer = setTimeout("changeSlide()", step_time);
}
}

function ShowNextImage() {

var pictureId = Math.floor(Math.random()*total_pictures);
changePicture(pictureId);
}

function StartSlideShow() {

if (slideshow_started == false) {

slideshow_started = true;
ShowNextImage();

} else {

slideshow_started = false;
}
}

function findPos(obj){

var posX = obj.offsetLeft;
var posY = obj.offsetTop;

while(obj.offsetParent){

if(obj == document.getElementsByTagName('body')[0]) {

break

} else {

posX=posX + obj.offsetParent.offsetLeft;
posY=posY + obj.offsetParent.offsetTop;
obj = obj.offsetParent;
}
}

var posArray=[posX,posY]
return posArray;
}

А теперь по порядку. Если, Вы уже заметили, слайд-шоу позиционируется в таблице. Единственные изменения, которые необходимо сделать при установке скрипта к Вам на сайт - изменить имена картинок и указать путь к папке с картинками:
// Путь к слайдам
var picture_dir = "demo/";

// Список слайдов
var pictures = new Array("london.jpg", "berlin.jpg", "amsterdam.jpg", "venice.jpg", "milan.jpg");
var total_pictures = pictures.length;

Для управления скорости смены картинок, Вы можете манипулировать следующими переменными:
var step_opacity = 1;
var step_time = 200;

Фактически позиционирование реализовывается достаточно просто.
Первая картинка размещается где угодно, а вторая налаживается на неё. При этом происходит поиск позиции (координат) первой картинки при помощи функции findPos. Данная функция возвращает абсолютные координаты любого объекта на экране. Уверен, что она будет вам полезна.

Так же необходимо заметить, что при помощи функции WinResize(), которая привязана к событию window.onresize - мы избегаем проблемы, когда при изменении размеров окна, вторая картинка остается на предыдущем месте, то есть не смещается относительно первой картинки.

 
Форум » Скрипты » Эффекты..., трюки... » Слайд-шоу на JavaScript
  • Страница 1 из 1
  • 1
Поиск:
мини-чат
Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2024 ()
уЧётчик сайта