Скрипт шикарного слайдера изображений сайта ucoz. Он и вправду красив и неординарен. Можно с него сделать фотоальбом так как картинки там не мелкие. И будит шикарно вписываться в ваш дизайн сайта.
Приступаем:
Стили прописываем там где вы хотите видеть этот слайдер.
Код
<style>
#container {width: 100%; height: 100%;}
.clear {clear: both; line-height: 0px; height: 0px; font-size: 0px;}
#menu {padding: 0px 15px 20px 15px; text-align: left;}
#menu .collections {float: left;}
#menu .pages {float: left;}
#menu ul li.highlight {background-color: #f1f1f1;}
#menu ul li {float: left; padding: 3px 6px; margin: 0px 3px 0px 0px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
#menu a, #menu a:visited {font-size: 14px; font-weight: 200; color: #333; width: 100%; -webkit-transition-duration:.5s; -webkit-transition-timing:ease-out; -moz-transition-duration:.5s; -moz-transition-timing:ease-out;}
#menu .pages a {color: #999;}
#menu li:hover {background-color: #EAEAEA; color: #666; text-shadow:1px 1px 0px rgba(255,255,255,0.7); -webkit-transition-duration:.5s; -webkit-transition-timing:ease-out; -moz-transition-duration:.5s; -moz-transition-timing:ease-out;}
#menu .squares {float: right; display: none;}
#menu .squares a {cursor: pointer; float: left; height: 10px; width: 10px; border: 1px solid #999; margin: 8px 0px 0px 4px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 2px;}
#menu .squares a:hover, #menu .squares a.active {background-color: #ddd;}
#slideshow {overflow: auto; margin: 0 auto; padding: 0px; width: 100%; overflow: hidden; position: relative;}
#photos {width: 100%; height: 500px; overflow: hidden;}
#photos.loading {background: transparent url(http://zornet.ru/ZORNET/loading.gif) center center no-repeat;}
#photos .photo {height: 500px; float: left; margin: 0px 0px 0px 10px;}
#photos .photo img {max-height: 500px; width: auto; display: block;}
.arrow {width: 32px; height: 32px; position: absolute; top: 543px; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: none;}
#prev {left: 20px; background: #fff url(http://zornet.ru/ZORNET/previous_arrow_black.gif) center center no-repeat;}
#next {right: 20px; background: #fff url(http://zornet.ru/ZORNET/next_arrow_black.gif) center center no-repeat;}
.arrow {opacity: 0.5;}
.arrow:hover {opacity: 1.0;}
</style>
Как прописали стили, ниже их прописываем код:
Код
<div id="container">
<div id="menu">
<div id="mini" class="squares"></div>
<div class="clear"></div>
</div>
<div id="slideshow">
<div id="photos" class="photos loading clearfix"></div>
</div>
<a class="arrow" id="prev"></a>
<a class="arrow" id="next"></a>
</div>
<script src="http://zornet.ru/ZORNET/horizontal.js"></script>
<script>
var galleryData = [{"image":"Ссылка на изображение 1"},{"image":"Ссылка на изображение 2"},{"image":"Ссылка на изображение 3"}];
</script>
Потом просто добавляем картинки - изображение. Если вам показалось мало изображений просто добавляем код.
Код
{"image":"Ссылка на изображение 4"},{"image":"Ссылка на изображение 5"}
На этом все!
