Дизайн принадлежит администрации сайта VSEpodrad.ru.
Администрация не несет ответственности за содержимое на нашем портале.
Администратор: .
|
Меню сайта
Смотри и качай бесплатно
Опрос сайта
Реклама
Онлайн пользователи
Онлайн всего: 3
Гостей: 3
Пользователей: 0
Раздел в разработке
VSEpodrad.ru
В разработке!
На сайт добавлено файлов
Cкроллер содержимого на jQuery для ucoz
Cкроллер содержимого на jQuery для ucoz
Cкроллер содержимого на jQuery для ucoz. Один из рабочих вариантов, скроллера изображений, для вашего сайта сделанного в системе uCoz.
Установка:
Добавим в начало нашей страницы, после тега body скрипты.
Code
<script type="text/javascript" src="amazon_scroller.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#amazon_scroller").amazon_scroller({
scroller_title_show: 'enable',
scroller_time_interval: '3000',
scroller_window_background_color: "none",
scroller_window_padding: '10',
scroller_border_size: '2',
scroller_border_color: '#9C6',
scroller_images_width: '80',
scroller_images_height: '60',
scroller_title_size: '11',
scroller_title_color: 'black',
scroller_show_count: '3',
directory: 'http://manucoz.ru/data/jQuery/Amazon_ckroller/'
});
});
</script>
<script language="javascript" type="text/javascript">
$(function() {
$("#amazon_scroller").amazon_scroller({
scroller_title_show: 'enable',
scroller_time_interval: '3000',
scroller_window_background_color: "none",
scroller_window_padding: '10',
scroller_border_size: '2',
scroller_border_color: '#9C6',
scroller_images_width: '80',
scroller_images_height: '60',
scroller_title_size: '11',
scroller_title_color: 'black',
scroller_show_count: '3',
directory: 'http://manucoz.ru/data/jQuery/Amazon_ckroller/'
});
});
</script>
для того чтобы, переключатель изображений, отображался у вас на странице, следует в выше предоставленном скрипте прописать папку, где лежит изображение arrow.gif, в моём случае это directory: 'http://manucoz.ru/data/jQuery/Amazon_ckroller/'
теперь установим наш основной код, где мы будем использовать списки, хочу заметить, что после основных списков с изображениями, мы добавляем ещё одни списки, которые будут отвечать за кнопку переключения изображений.
Code
<div id="amazon_scroller" class="amazon_scroller">
<div class="amazon_scroller_mask">
<ul>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_04.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_04.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
</ul>
</div>
<ul class="amazon_scroller_nav">
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>
<div class="amazon_scroller_mask">
<ul>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_04.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_04.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_01.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_02.jpg" alt="title"/></a></li>
<li><a href="#"><img src="img/Fade_Out_03.jpg" alt="title"/></a></li>
</ul>
</div>
<ul class="amazon_scroller_nav">
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>
CSS-Code
Code
.amazon_scroller{
padding: 0px;
margin: 0px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
}
.amazon_scroller .amazon_scroller_nav{
position: absolute;
}
.amazon_scroller .amazon_scroller_nav li{
cursor: pointer;
position: absolute;
}
.amazon_scroller .amazon_scroller_mask{
position: absolute;
margin-left: 30px;
margin-right: 30px;
overflow: hidden;
}
.amazon_scroller ul{
padding: 0px;
margin: 0px;
float: left;
}
.amazon_scroller ul li{
padding: 0px;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
list-style: none;
float: left;
text-align: center;
display:inline;
}
.amazon_scroller ul li a{
text-decoration: none;
}
.amazon_scroller ul li a:hover{
text-decoration: underline;
}
.amazon_scroller ul li a img{
border: none;
}
padding: 0px;
margin: 0px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
}
.amazon_scroller .amazon_scroller_nav{
position: absolute;
}
.amazon_scroller .amazon_scroller_nav li{
cursor: pointer;
position: absolute;
}
.amazon_scroller .amazon_scroller_mask{
position: absolute;
margin-left: 30px;
margin-right: 30px;
overflow: hidden;
}
.amazon_scroller ul{
padding: 0px;
margin: 0px;
float: left;
}
.amazon_scroller ul li{
padding: 0px;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
list-style: none;
float: left;
text-align: center;
display:inline;
}
.amazon_scroller ul li a{
text-decoration: none;
}
.amazon_scroller ul li a:hover{
text-decoration: underline;
}
.amazon_scroller ul li a img{
border: none;
}
Всё, теперь наш скроллер изображений на jquery готов.
Вы сейчас просматриваете Cкроллер содержимого на jQuery для ucoz. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Cкроллер содержимого на jQuery для ucoz нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Cкроллер содержимого на jQuery для ucoz и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.
| Всего комментариев: 0 | |
