» »

Скрипт смена изображений на JavaScript


Скрипт смена изображений на JavaScript

По моему отличный скрипт Ротатор изображение, который производит смену. Где веб мастер может установить под любую тематику и выставить размер. картинки, тот который ему нужен. Если просто так прикинуть, то можно на кино сайт поставить в статью и чтоб не загружать много картинок, просто встроит этот скрипт с кнопками, где вы сами будете переключать. Это второй JavaScript но а первый Добавить в избранное для сайта, где вы можете сделать прямо с ресурса. Так и на других темах, работает он на HTML, что под любой материал или статью. Вы написали, и сделали установку по изображению, и чтоб места не занимало, установили код, вообщем смотрим демонстрацию и все поймете, но с начало к установке.

JavaScript устанавливаем между тегами head и /head чтоб корректно работал. Что по самому изображению, здесь установлено их 3, вы ставите столько вам нужно, просто продолжаем прописывать ссылки.

Код
<script type="text/javascript">
  var array = new Array(
  "http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/1397.jpg",
  "http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/1158.jpg",
  "http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/020.jpg"
  );//массив с путями к картинкам
  var i = 0;
  function left() {
  var image = document.getElementById("rotatorbutton");
  i--;
  if (i < 0) i = array.length - 1;
  image.src = array[i];
  }
  function right() {
  var image = document.getElementById("rotatorbutton");
  i++;
  if (i == array.length) i = 0;
  image.src = array[i];
  }
</script>


Теперь сам код HTML, где вы можете регулировать и задавать размеры, ставим при установки ниже а body и /body и все сохраняем.

Код
<table>
  <tr>
  <td>
  <input type = 'button' name = 'left' value = '<' onclick = 'left()' />
  </td>
  <td>
  <script type = 'text/javascript'>
  document.write("<img id = 'rotatorbutton' src = '" + array[0] + "' alt = 'Ротатор изображений с кнопками' width = '200' height = '200' />");
  </script>
  </td>
  <td>
  <input type = 'button' name = 'right' value = '>' onclick = 'right()' />
  </td>
  </tr>
</table>


13.05.2016 Просмотров: 477 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
Сафрон
Сафрон 13.05.2016 00:561
0
Что Костен, стал изучать JavaScript, просто вижу уже не первый скрипт на сайте. А что вот по этому, этот думаю найдет свое место, просто в каких то случаях его лучше применить, еще бы на нем увеличение было.
Kosten
Kosten 13.05.2016 01:063
0
Тут такое дело Сафрон, посчитал что кому то пригодится и главное работает на сайте, что предоставил DEMO и вот на сайте, только не знаю источника, так как скрипт этот на несколько блоков ссылается, но думаю который первый тот поставлю.
FeStemBer
FeStemBer 13.05.2016 01:002
0
Как раз есть такая тема, где можно применить, можно же вывести этот скрипт на отдельную страницу и там уже сделать намного шире и явно под десяток фотографий.
Kosten
Kosten 13.05.2016 01:084
0
Да не вопрос, можно создать страницу, ведь на ней Панель HTML кодов есть и нужно обязательно переключить и вывести, а что много картинок, не знаю на счет сильно много, но пару десятков можно выставить.
FeStemBer
FeStemBer 13.05.2016 01:166
0
Просто один блог семейный веду, и хочу с этим скриптом сделать страницы, по праздникам или каким то дням, чтоб просто выйти и как фотоальбом смотреть, просто мне такая текстура больше нравится чем фотоальбом, все равно все закрыто от поиска, так как семейный.
Tergran
Tergran 13.05.2016 01:115
0
Kosten, что то не в своем стиле, не закругляешь углы, мне кажется так намного сильней получилось. Сам каркас выставить еще прозрачный, но так много можно добавить.
Kosten
Kosten 13.05.2016 01:187
0
Не думаю что в этом случай нужно что то закруглять, да если честно, тут нужно понять, куда border-radius: 1px; ставить, здесь как видите стили не идут.
tsakonter
tsakonter 13.05.2016 01:208
0
Мне этот скрипт давно известен, имею виду на одном сайте видел, но не как скрипт, там все также, не чего не изменено.
Kosten
Kosten 13.05.2016 01:319
0
Не новость, думаю на системе uCoz много где применяют JavaScript, так как очень удобно и по установке не сложно.
avatar