Демонстрировать лучшие содержание вашего сайта или блога, желательно таким образом, что оно выглядело просто, красиво и удобно. Использование автоматического воспроизведения содержимого в виде слайдера, является одним из способов удачной демонстрации. Это экономит пространство вашего сайта и делает пользование вашим сайтом более удобным.
Сегодня я собираюсь показать вам, как создать такой автоматический слайдер контента для вашего вебсайта, используя технологию Jquery.
Давайте начнем.
Шаг 1. Добавление файлов JavaScript
Вставьте код расположенный ниже, между тегами
Code
<head> </head>
Code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
Шаг 2. Создаём рекомендуемую структуру содержания.
Теперь давайте создадим содержание для автоматического слайдера, которое будет структурировано как перечень, расположенный в левой части слайдера и содержащий в себе превью контента и его описание.
Code
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1">
<img src="images/image1-small.jpg" alt="" />
<span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2">
<img src="images/image2-small.jpg" alt="" />
<span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3">
<img src="images/image3-small.jpg" alt="" />
<span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4">
<img src="images/image4-small.jpg" alt="" />
<span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor.
Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
liquam erat volutpat. Proin id volutpat nisi.
Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
Quisque sed orci ut lacus viverra interdum ornare sed est.
Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
Шаг 3. Создание таблицы стилей CSS.
Создайте таблицу стилей CSS и поместите в неё кодовую часть из этого шага.
Code
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
Параметры height и width - это значение ширины и высоты возпроизводимого содержания, а параметр padding-right позволяет сделать отступ вправо для помещения на это место навигации контента.
Code
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
Шаг 4. Подключения JavaScript кода, позволяющего автоматически пролистывать содержимое.
Вставьте код расположенный ниже сразу же после кода из шага 1.
Code
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
Изменение цифрового значения, позволит Вам изменить скорость пролистывания.
Вот и всё, автоматический слайдер готов к применению.
====================================================
Комментарий 2010-05-05 оставил Максим
Классный скрипт Пытаюсь ставить на юкоз-не функционирует, даже если ставлю версию для более ранней версии jQuery( с английской версии)
Комментарий 2010-05-12 оставил Михаил
Уважаемый максим ваша проблема возможна по нескольким причинам, 1е специалист каторый обладает этим сайтом немного не дорасчитал, коды каторые подключают библиотеку нужно прописывать после
Code
<body>
Code
<script type="text/javascript">jquery.noConflict();</script>
Создаём красивую галерею на jQuery
Здравствуйте уважаемый гость. В утом уроке я покаже вам как создать прекрасную галерею из ваших изображений.
Шаг 1. Поместите между тегами <head> следующий код:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>Он позволит подключить таблицу стилей CSS и обеспечит работу библиотеки jQuery.
Шаг 2. Теперь необходимо между тегами <body> вставить код, обеспечивающий вывод изображений. В данном примере используется 7 изображений, Вы сможете увеличить их количество. Чтобы выводить свои изображеия Вам достаточно будет поменять ссылки на свои.
<div id="header"><div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>Шаг 3. После выше описанного кода вставьте этот простой код JavaScript. В нем вы сможете задать название и описание для каждого изображения, которые будут выводится при просмотре галереи.
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[
{"id":"slide-img-1","client":"Добавьте название изображения","desc":"а сюда его описание"},
{"id":"slide-img-2","client":"Добавьте название изображения","desc":"а сюда его описание"},
{"id":"slide-img-3","client":"Добавьте название изображения","desc":"а сюда его описание"},
{"id":"slide-img-4","client":"Добавьте название изображения","desc":"а сюда его описание"},
{"id":"slide-img-5","client":"Добавьте название изображения","desc":"а сюда его описание"},
{"id":"slide-img-6","client":"Добавьте название изображения","desc":"а сюда его описание"},
{"id":"slide-img-7","client":"Добавьте название изображения","desc":"а сюда его описание"}];
</script>Шаг 4. Для полного функционирования данной галереи осталось создать таблицу стилей (style.css) и вставить в неё следующий код:
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls
p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls
p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}Осталось лишь протестировать и восхитится полученной галереей.
Спасибо за внимание!
Перевод урока: Гулевич Павел
Оригинал урока находится здесь.
Читать ЛС ()