Простой слайдер новостей и фото изображений на uCoz[
Скачать с сервера (2.6Kb)
]
Много раз нам приходилось пострадать, от того, что на сайт требуется
очень легенький слайдер и совсем не нужно перегружать код страницы
лишними данными. Ну не нужны супер-эффекты при прокрутке изображений или
тяжелые средства навигации. Просто легенький слайдер для сайтов, где и
картинок-то не так много. Но начав поиск нужного материала в поисковиках
мы чаще всего натыкаемся на информацию о том, как заработать деньги сидя дома без вложений, а не то, что нам необходимо. Мы сталкивались с этой проблемой и искали, наши друзья и коллеги
сталкивались и искали, и наконец, перебрав много вариантов, заценив все
"за и "против", мы всем миром пришли к выводу, что один из лучших и
заслуживающих внимания в этом случае - продукт Ucoz - самый легкий
слайдер просмотра изображений. Написан традиционно с использованием
JQuery. Вообще, любителям плагинов от Ucoz советуем следить за выходом
новых версий библиотек JQuery, так как подавляющее большинство продуктов
требуют их и только их. Скрипт подразумевает простое оформление и
навигацию - с помощью мыши можно переключать изображения в любой
последовательности. Оформление подходит для сайтов любой тематики и не
имеет каких-то особенных элементов управления и навигации. Смена
картинок происходит плавно, без рывков. Очень позитивное впечатление
оставил легкий слайдер, так что всем советуем.
Важно: Скрипты из прикреплённого архива залейте в папку js
Установка:
После /head на нужных страницах вставляйте: <scriptsrc="/js/jquery.scrollTo.js"></script>
<scriptsrc="/js/jquery.localscroll.js"></script>
<scriptsrc="/js/scripts.js"></script>
|
Следующий код в самый низ вашего css: #slideshow {
width:918px;
height:546px;
overflow-x: scroll;
overflow-y: hidden;
margin:100pxauto50pxauto;
box-shadow:0px0px80px#000;
-moz-box-shadow:0px0px80px#000;
-webkit-box-shadow:0px0px80px#000;
}
#slideshow ul {
width:4590px;
list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {
width:300px;
margin:0auto200pxauto;
visibility: hidden;
}
#slideshow-nav ul {
list-style: none;
}
#slideshow-nav ul li {
float: left;
}
#slideshow-nav ul li a {
display: block;
width:30px;
height:30px;
float: left;
margin:010px;
background-color:#fff;
text-indent:-9999px;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
box-shadow:0px0px30px#000;
-moz-box-shadow:0px0px30px#000;
-webkit-box-shadow:0px0px30px#000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
background-color:#a89d8a;
}
a {
outline: none;
}
a:focus {
background-color:#a89d8a;
}
|
Далее в то место, где должен быть слайдер, вставляйте:
<divid="slideshow">
<ul>
<liid="img1">
<a>
<imgsrc="Ссылка на картинку 1"/>
</a>
</li>
<liid="img2">
<a>
<imgsrc="Ссылка на картинку 2"/>
</a>
</li>
<liid="img3">
<a>
<imgsrc="Ссылка на картинку 3"/>
</a>
</li>
<liid="img4">
<a>
<imgsrc="Ссылка на картинку 4"/>
</a>
</li>
<liid="img5">
<a>
<imgsrc="Ссылка на картинку 5"/>
</a>
</li>
</ul>
</div>
<divid="slideshow-nav">
<ul>
<li><ahref="#img1">Пункт 1</a></li>
<li><ahref="#img2">Пункт 2</a></li>
<li><ahref="#img3">Пункт 3</a></li>
<li><ahref="#img4">Пункт 4</a></li>
<li><ahref="#img5">Пункт 5</a></li>
</ul>
</div>
|
| 
