Categories: Юзабилити

🇯🇸 Cкрипт движущейся фотоленты для сайта

В интернете я нашла очень интересный Cкрипт движущейся фотоленты, который можно утсановить на любом сайте. Скрпит создает эффект фотографий, которые постоянно двигаются . Сам скрипт очень простой в установке, но он очень оживляет сайт. Вот так выглядит этот эффект на одном из моих сайтов.

✪ DEMO⇊ СКАЧАТЬ

JS

Скрипт легко устанавливается и легко редактируется. Для начала Вам необходимо выбрать изображения, загрузить их на сайта т выписать путь к каждому изображению. Далее в необходимом месте сайта, в режиме HTML вставляете следующий код:

<center> 
  <script type="text/javascript"> 
  var sliderwidth="650px"//Specify the slider's width (in pixels) 
  var sliderheight="200px"//Specify the slider's height 
  var slidespeed=2//Specify the slider's slide speed (larger is faster 1-10) 
  slidebgcolor="#000000"//configure background color: 
  var leftrightslide=new Array()//Specify the slider's images 
  var finalslide='' 
  leftrightslide[0] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image1.jpg" width=300 height=200 border="0"></a>' 
  leftrightslide[1] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image2.jpg" width=300 height=200 border="0"></a>' 
  leftrightslide[2] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image3.jpg" width=300 height=200 border="0"></a>' 
  leftrightslide[3] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image4.jpg" width=300 height=200 border="0"></a>' 
  leftrightslide[4] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image5.jpg" width=300 height=200 border="0"></a>' 
  leftrightslide[5] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image6.jpg" width=300 height=200 border="0"></a>' 
  leftrightslide[6] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image7.jpg" width=300 height=200 border="0"></a>' 
  //Specify gap between each image (use HTML): 
  var imagegap=" "  
//Specify pixels gap between each slideshow rotation (use integer): 
  var slideshowgap=2 
   
////NO NEED TO EDIT BELOW THIS LINE////////////  
var copyspeed=slidespeed 
  leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' 
  var iedom=document.all||document.getElementById 
  if (iedom) 
  document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') 
  var actualwidth='' 
  var cross_slide, ns_slide  
function fillup(){ 
  if (iedom){ 
  cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 
  cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 
  cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide 
  actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth 
  cross_slide2.style.left=actualwidth+slideshowgap+"px" 
  } 
  else if (document.layers){ 
  ns_slide=document.ns_slidemenu.document.ns_slidemenu2 
  ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 
  ns_slide.document.write(leftrightslide) 
  ns_slide.document.close() 
  actualwidth=ns_slide.document.width 
  ns_slide2.left=actualwidth+slideshowgap 
  ns_slide2.document.write(leftrightslide) 
  ns_slide2.document.close() 
  } 
  lefttime=setInterval("slideleft()",30) 
  } 
  window.onload=fillup  
function slideleft(){ 
  if (iedom){ 
  if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) 
  cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" 
  else 
  cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" 
   
  if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) 
  cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" 
  else 
  cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" 
  } 
  else if (document.layers){ 
  if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed 
  else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap 
  if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed 
  else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap 
  } 
  }  
if (iedom||document.layers){ 
  with (document){ 
  document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') 
  if (iedom){ 
  write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') 
  write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">') 
  write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>') 
  write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>') 
  write('</div></div>') 
  } 
  else if (document.layers){ 
  write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') 
  write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') 
  write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') 
  write('</ilayer>') 
  } 
  document.write('</td></table>') 
  } 
  } 
  </script> 
  </center> 

В коде необходимо откорректировать подправить некоторые переменные:
var sliderwidth=”650px” – ширина фотоленты, по умолчанию 650 пикселей;
var sliderheight=”200px” – высота фотоленты, по умолчанию 200 пикселей;
http://yoursite.com – ссылка на Ваш сайт (так для всех семи картинок)
http://yoursite.com/image1.jpg – ссылка (полный путь) на картинку, также отдельно для всех семи картинок.

Количество картинок можно уменьшать и увеличивать.
Надеюсь, Вам этот скрипт понравился так же как и мне.

View Comments

  • Здравствуйте! Спасибо за ваш сайт, оч много полезного. Все так доступно написано, что даже новичек сможет разобраться! Можно ли узнать на счет этого скрипта?
    1. Как задать движение фото так, чтобы одна продвинулась, лента остановилась... и так далее
    2. Как добавить переключатели вправо, влево
    3. Как сделать фон ленты прозрачным
    Заранее благодарю!

    • Здравствуйте Константин! Спасибо за добрые слова. Мне всегда очень приятно знать, что мой сайт действительно нужен пользователям.
      Отвечая, на Ваши вопросы, хочу еще раз напомнить (я писала это в начале статьи), что скрипт придуман не мной, поэтому особо редактировать его я не пыталась.
      Фон фотоленты меняется тут: slidebgcolor="#000000", но как сделать его прозрачным пока не знаю, его можно подогнать под дизайн самого сайта по цвету.
      Что касается переключателей и остановок фото, возможно, Вам больше подойдет такой вариант: Слайдер изображений

  • Добрый день! Большое спасибо за подробное объяснение по редактированию скрипта, все подробно и доступно! Ваш материал приносит огромное облегчение нам, чайникам ^_^, для которых стало необходимостью в работе, иметь свои сайты.
    Пожалуйста, помогите еще: укажите , какую переменную нужно поправить, что бы увеличить фотоленту до 12 фото?
    write
    С уважением и наилучшими пожеланиями!

    • Уважаемая Вера Михайловна!

      Спасибо за Ваши теплые слова! Чтобы было 12 фотографий, нужно добавить
      leftrightslide[7] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image8.jpg" width=300 height=200 border="0"></a>'
      leftrightslide[8] ='<a href="http://yoursite.com"><img src="http://yoursite.com/image9.jpg" width=300 height=200 border="0"></a>'

      и так до 12 фотографий по аналогии.

Recent Posts

  • Excel

Как правильно открыть CSV с многострочными ячейками в Excel

Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More

% дней назад
  • Python

Загрузка проекта на Github и Автодеплой на сервер

Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More

% дней назад
  • Python
  • Полезная минутка

Миграция базы данных в проектах Python

Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More

% дней назад
  • Python

Команды Git – Шпаргалка по основным командам Git

Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More

% дней назад
  • Python

Установка PostgreSQL на сервер Ubuntu и подключение через pgAdmin

Установка PostgreSQL на сервер Read More

% дней назад
  • Полезная минутка

Как создать PrimaryKey для таблицы в PostgreSQL

Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More

% дней назад