IPB

Здравствуйте, гость ( Вход | Регистрация )

 
 Ответить в данную темуНачать новую тему
Простейшее слайд-шоу, на JavaScript
Посторонним В.
сообщение 23.2.2009, 19:07
Сообщение #1


Раскрыть


Задача: на страничке имеется картинка, нужно, чтобы она менялась на другие с определенным интервалом.

Для начала "пометьте" картинку ИДентификатором, например, так:
<img alt="" id=slideshow src="rere.jpg">


У тэга body задайте атрибут onload, если этого еще не сделано:
<body onload='start()'>

В этом атрибуте задается функция, которая будет запускаться после загрузки страницы.
В раздел HEAD добавьте такой скрипт:

<script type="text/javascript">
var interval=5 //интервал в секундах
var img, n=0
var imgsrc=['book14.jpg','book23.jpg','disk.jpg','disk-comp.jpg','inlay.jpg','matrix.jpg']

function start(){
  setInterval(show, interval*1000)
} 

function show(){
  if(!img)img=document.getElementById('slideshow');
  img.src=imgsrc[n++];
  if(n>=imgsrc.length) n=0;
}
</script>


Пояснения и замечания.
1. Еслу у вас уже есть своя функция, запускаемая после загрузки страницы, то просто добавьте в нее строку
  setInterval(show, interval*1000)

2. В переменной interval впишите интервал в секундах
3. В переменной (массиве) imgsrc в кавычках через запятую перечислите ссылки на показываемые изображения.
4. Помните о том, что загрузка картинки может занимать некоторое время. При большом объеме
желательно организовать предварительную загрузку изображений.


Спасибо сказали:
Jemand,
Перейти в начало страницы
 
+Цитировать сообщение
Google
сообщение
Сообщение #0






--------------------
Click, click, click...
Перейти в начало страницы
 
+Цитировать сообщение
lyces
сообщение 23.2.2009, 19:21
Сообщение #2


Раскрыть


А у всех ли будет работать такая конструкция? Я имею ввиду браузеры с отключенными приложениями выполнения сценария и прочее. Например, при уровне защиты (как наз-ся эта функция браузера IE?) или безопасности выше среднего скрипты не выполняются.


--------------------
Лукес ассоциируется с клоном. Светлая.
Перейти в начало страницы
 
+Цитировать сообщение
Посторонним В.
сообщение 23.2.2009, 20:33
Сообщение #3


Раскрыть


Естественно, скрипты будут выполняться, если только браузер их выполняет и они включены (по умолчанию всегда так)
smile.gif
Подобный твоему пост можно написать в любой теме этого подраздела. Включать ли выполнение скриптов или нет - дело пользователя и не тема этого раздела форума smile.gif


Спасибо сказали:
Konrad-Green,
Перейти в начало страницы
 
+Цитировать сообщение
Konrad-Green
сообщение 24.2.2009, 19:27
Сообщение #4


Раскрыть


А нельзя ли это "Простейшее слайд-шоу" слегка приукрасить, например, добавить плавную смену одной фотки на другую? Если это сложно не заморачивайтесь, обойдусь тем что есть, спасибо!


--------------------
Начинать делать глупости нужно как можно раньше, тогда будет время их исправить.
Перейти в начало страницы
 
+Цитировать сообщение
Посторонним В.
сообщение 26.2.2009, 14:00
Сообщение #5


Раскрыть


Можно, всё можно. Но не без труда smile.gif

Проще всего сделать для Эксплорера, там для этого есть штатные средства. А вот чтобы везде работало...

Приведенный ниже пример работает в основных браузерах.

1. Скачайте библиотеку jQuery и разместите ее на своем сайте. jQuery - это просто javascript-файл.
Можно взять здесь http://naunaunau.narod.ru/scripts/jquery.js или скачать последнюю версию на сайте проекта jQuery.com
Файл небольшой, порядка 30 кб.

2. "Пропишите" его в разделе HEAD страницы, что-то типа:
<script type="text/javascript" src="/scripts/jquery.js"></script>


3. В разделе HEAD страницы поместите скрипт:
<script type="text/javascript">
var period=5 
var imgX=400, imgY=300
// *************************
$(document).ready(function(){setInterval(show_next, period*1000);});

function show_next(arg){
  var s='fade normal up up2 down left right center show'.split(' ')
  for(var i=0; i<s.length; i++){

    if(s[i].match(/normal$|show$|fade$|up2$/gim)) var el=$('#show_'+s[i]+' img:first').hide();
    if(s[i]=='left')  var el=$('#show_left img:first').css({left:(-imgX)+'px'});
    if(s[i]=='right') var el=$('#show_right img:first').css({left:(imgX)+'px'});
    if(s[i]=='up')    var el=$('#show_up img:first').css({top:(-imgY)+'px'});
    if(s[i]=='down')  var el=$('#show_down img:first').css({top:(imgY)+'px'});
    if(s[i]=='center')var el=$('#show_center img:first').css({left:(imgX/2)+'px',top:(imgY/2)+'px',width:'1px',height:'1px',opacity:'0'});

    $('#show_'+s[i]).append(el)
    var newel=$('#show_'+s[i]+' img:last')

    if(s[i]=='normal') newel.show();
    if(s[i]=='show')   newel.show('slow');
    if(s[i]=='fade')   newel.fadeIn('slow');
    if(s[i]=='up2')    newel.slideDown() 
    if(s[i].match(/up$|down$|left$|right$/gim)) newel.animate({top: "0",left: "0"}, 500)
    if(s[i]=='center') newel.animate({top: "0",left: "0",width: imgX+'px', height:imgY+'px',opacity:'1'}, 500)
  }
};
</script>


3. "Настройте" его - задайте свои значения параметров period - период показа в секундах,
imgX, imgY - размеры картинко в пикселях по горизонтали и вертикали соответственно.

4. Группу картинок (одинакового размера) в коде HTML следует помещать в блочный элемент, например DIV, которому задано абсолютное или относительное позиционирование !!!, размер блока должен быть равен размеру картинок. Картинки должны иметь абсолютное позиционирование
с равными нулю свойствами top и left (ноль по умолчанию). Например, такие стили:
<style type="text/css">
#show_center, #show_up, #show_up2, #show_left, #show_right, #show_down, #show_normal,#show_show, #show_fade
{
  position:relative;
  width:400px;
  height:300px;
  border:1px solid red;
  overflow:hidden;
}
#show_center img, #show_up img, #show_up2 img, 
#show_left img, #show_right img, #show_down img, #show_normal img,
#show_show img, #show_fade img
{
  position:absolute;
  top:0;left:0;
}
</style>


Элемент-обертка должен иметь атрибут ID c одним из вышеприведенных (в style) значений, например:
<div id="show_fade">
<img src=559247836_1.jpg width=400 height=300>
<img src=559247836_2.jpg width=400 height=300>
<img src=559248116.jpg   width=400 height=300>
</div>


В зависимости от ID будут применяться различные эффекты:
show_normal - обычная "мгновенная" смена картинок;
show_up - новая картинка "выезжает" сверху;
show_up2 - то же, вариант;
show_left - новая картинка "выезжает" слева;
show_right - новая картинка "выезжает" справа;
show_down - картинка "выезжает" снизу;
show_center - картинка появляется из центра;
show_show - картинка плавно появляется из левогг верхнего угла;
show_fade - плавная замена картинки.

Если на странице будут использоваться не все эффекты, то лишние проверки (if) в скрипте можно удалить. wink.gif
Это, конечно, не все эффекты. "Придумывать" их можно бесконечно smile.gif


Спасибо сказали:
Jemand,
Перейти в начало страницы
 
+Цитировать сообщение
Google
сообщение
Сообщение #0






--------------------
Click, click, click...
Перейти в начало страницы
 
+Цитировать сообщение
Посторонним В.
сообщение 8.4.2009, 19:16
Сообщение #6


Раскрыть


Кто-нить пробовал? huh.gif
Перейти в начало страницы
 
+Цитировать сообщение
Konrad-Green
сообщение 28.4.2009, 1:04
Сообщение #7


Раскрыть


Цитата
Кто-нить пробовал?

Конечно пробовали


--------------------
Начинать делать глупости нужно как можно раньше, тогда будет время их исправить.
Перейти в начало страницы
 
+Цитировать сообщение
Посторонним В.
сообщение 28.4.2009, 13:06
Сообщение #8


Раскрыть


Я о последнем...
Перейти в начало страницы
 
+Цитировать сообщение
Konrad-Green
сообщение 8.5.2009, 5:57
Сообщение #9


Раскрыть


И я о том же. На главной странице, внизу слева, несколько маленьких фотографий сменяют друг друга при помощи твоего скрипта и jquery, которую скачал по твоему совету с jQuery.com


--------------------
Начинать делать глупости нужно как можно раньше, тогда будет время их исправить.
Перейти в начало страницы
 
+Цитировать сообщение
Посторонним В.
сообщение 8.5.2009, 21:43
Сообщение #10


Раскрыть


А, вижу smile.gif
(картинки лучше не масштабировать на странице, имхо)
Перейти в начало страницы
 
+Цитировать сообщение
Google
сообщение
Сообщение #0






--------------------
Click, click, click...
Перейти в начало страницы
 
+Цитировать сообщение
voldemen
сообщение 16.9.2010, 14:36
Сообщение #11


Раскрыть


Цитата(Посторонним В. @ 23.2.2009, 20:07) *
Задача: на страничке имеется картинка, нужно, чтобы она менялась на другие с определенным интервалом.

Для начала "пометьте" картинку ИДентификатором, например, так:
<img alt="" id=slideshow src="rere.jpg">


У тэга body задайте атрибут onload, если этого еще не сделано:
<body onload='start()'>

В этом атрибуте задается функция, которая будет запускаться после загрузки страницы.
В раздел HEAD добавьте такой скрипт:

<script type="text/javascript">
var interval=5 //интервал в секундах
var img, n=0
var imgsrc=['book14.jpg','book23.jpg','disk.jpg','disk-comp.jpg','inlay.jpg','matrix.jpg']

function start(){
  setInterval(show, interval*1000)
} 

function show(){
  if(!img)img=document.getElementById('slideshow');
  img.src=imgsrc[n++];
  if(n>=imgsrc.length) n=0;
}
</script>


Пояснения и замечания.
1. Еслу у вас уже есть своя функция, запускаемая после загрузки страницы, то просто добавьте в нее строку
  setInterval(show, interval*1000)

2. В переменной interval впишите интервал в секундах
3. В переменной (массиве) imgsrc в кавычках через запятую перечислите ссылки на показываемые изображения.
4. Помните о том, что загрузка картинки может занимать некоторое время. При большом объеме
желательно организовать предварительную загрузку изображений.


А возможна замена картинки маленькими квадратиками(видел на одном сайте не помню каком)
Перейти в начало страницы
 
+Цитировать сообщение
Посторонним В.
сообщение 16.9.2010, 21:04
Сообщение #12


Раскрыть


Возможна.
Перейти в начало страницы
 
+Цитировать сообщение
« Предыдущая тема · JavaScript · Следующая тема »
 

Ответить в данную темуНачать новую тему

 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия Сейчас: 5.2.2012, 22:18
Форум IP.Board © 2012  IPS, Inc.
Лицензия зарегистрирована на: web-forum.ws