В интернете я нашла очень интересный Cкрипт движущейся фотоленты, который можно утсановить на любом сайте. Скрпит создает эффект фотографий, которые постоянно двигаются . Сам скрипт очень простой в установке, но он очень оживляет сайт. Вот так выглядит этот эффект на одном из моих сайтов.
JS
Скрипт легко устанавливается и легко редактируется. Для начала Вам необходимо выбрать изображения, загрузить их на сайта т выписать путь к каждому изображению. Далее в необходимом месте сайта, в режиме HTML вставляете следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<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 — ссылка (полный путь) на картинку, также отдельно для всех семи картинок.
Количество картинок можно уменьшать и увеличивать.
Надеюсь, Вам этот скрипт понравился так же как и мне.
Здравствуйте! Спасибо за ваш сайт, оч много полезного. Все так доступно написано, что даже новичек сможет разобраться! Можно ли узнать на счет этого скрипта?
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 фотографий по аналогии.