Форум о Народе (HTML, CSS, JS, помощь новичкам). [Форум Invision Power Board]

Автор: Посторонним В. 23.2.2009, 19: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. Помните о том, что загрузка картинки может занимать некоторое время. При большом объеме
желательно организовать предварительную загрузку изображений.

Автор: lyces 23.2.2009, 19:21

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

Автор: Посторонним В. 23.2.2009, 20:33

Естественно, скрипты будут выполняться, если только браузер их выполняет и они включены (по умолчанию всегда так)

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

Автор: Konrad-Green 24.2.2009, 19:27

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

Автор: Посторонним В. 26.2.2009, 14:00

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

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

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

1. Скачайте библиотеку jQuery и разместите ее на своем сайте. jQuery - это просто javascript-файл.
Можно взять здесь http://web-forum.ws/redirect.php?http://naunaunau.narod.ru/scripts/jquery.js или скачать последнюю версию на сайте проекта http://web-forum.ws/redirect.php?http://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) в скрипте можно удалить.

Это, конечно, не все эффекты. "Придумывать" их можно бесконечно

Автор: Посторонним В. 8.4.2009, 19:16

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

Автор: Konrad-Green 28.4.2009, 1:04

Цитата

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

Конечно http://web-forum.ws/redirect.php?http://help-html-css.narod.ru/

Автор: Посторонним В. 28.4.2009, 13:06

Я о последнем...

Автор: Konrad-Green 8.5.2009, 5:57

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

Автор: Посторонним В. 8.5.2009, 21:43

А, вижу
(картинки лучше не масштабировать на странице, имхо)

Автор: voldemen 16.9.2010, 14:36

Цитата(Посторонним В. @ 23.2.2009, 20:07)