kota007

Объявление

  • Текст первой новости.
  • Текст второй новости.
  • Текст третьей новости.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » kota007 » Слайдеры новостей » 2

2

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: маленький котя
  • Администратор
  • Зарегистрирован: 2011-01-15
  • Приглашений: 0
  • Сообщений: 4
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    2 часа 26 минут
  • Последний визит:
    2011-01-18 15:14:22

Шаг 1. Добавление файлов JavaScript

Вставьте код расположенный ниже, между тегами . Благодаря нему вы подключите библиотеку jQuery.

Код: Выделить всё
<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. Создаём рекомендуемую структуру содержания.

Теперь давайте создадим содержание для автоматического слайдера, которое будет структурировано как перечень, расположенный в левой части слайдера и содержащий в себе превью контента и его описание.

Код: Выделить всё
<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 и поместите в неё кодовую часть из этого шага. Параметры height и width - это значение ширины и высоты возпроизводимого содержания, а параметр padding-right позволяет сделать отступ вправо для помещения на это место навигации контента.

Код: Выделить всё
#featured{ 

width:400px; 

padding-right:250px; 

position:relative; 

height:250px; 

background:#fff; 

border:5px solid #ccc; 

} 

#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.

Код: Выделить всё
<script type="text/javascript">
$(document).ready(function(){ 

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 

}); 
</script>

Изменение цифрового значения, позволит Вам изменить скорость пролистывания.

Вот и всё, автоматический слайдер готов к применению.

Живой пример Вы можете посмотреть здесь http://www.webmoments.ru/images/15/demo/index.html

0

2

  • Автор: маленький котя
  • Администратор
  • Зарегистрирован: 2011-01-15
  • Приглашений: 0
  • Сообщений: 4
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    2 часа 26 минут
  • Последний визит:
    2011-01-18 15:14:22

в html-верх плагин слайдера и стиль:

    <script type="text/javascript" src="http://www.queness.com/resources/html/newsslider/js/jquery.scrollTo.js"></script>

    <style type="text/css">
    #slider {width:400px;
    height:250px;
    position:relative;
    overflow:hidden;
                  left:250px;}

    #buttons {margin-left:250px;}

    #mask-gallery {overflow:hidden;}

    #gallery {/* Clear the list style */
    list-style:none;
    margin:0;
    padding:0;
    z-index:0;
    /* width = total items multiply with #mask gallery width */
    width:900px;
    overflow:hidden;}

    #gallery li {float:left;}

    #mask-excerpt {position:absolute;
    top:0;
    left:0;
    z-index:500px;
    width:100px;
    overflow:hidden; }

    #excerpt {filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
    list-style:none;
    margin:0;
    padding:0;
    z-index:10;
    position:absolute;
    top:0;
    left:0;

    /* Set the style */
    width:100px;
    background-color:#000;
    overflow:hidden;
    font-family:arial;
    font-size:14px;
    color:#fff;}

    #excerpt li {padding:5px;}

    .clear {clear:both; }
    </style>

в html-низ:
Код:

<script type="text/javascript">
$(document).ready(function() {
//Speed of the slideshow
var speed = 5000;

//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

//Assign a timer, so it will run periodically
var run = setInterval('newsslider(0)', speed);

$('#gallery li:first, #excerpt li:first').addClass('selected');

//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});

//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsslider(0)', speed);
return false;
});

//Next Slide by calling the function
$('#btn-next').click(function () {
newsslider(0);
return false;
});

//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsslider(1);
return false;
});

//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(

function() {
clearInterval(run);
},
function() {
run = setInterval('newsslider(0)', speed);
}
);

});

function newsslider(prev) {

//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

//if prev is set to 1 (previous item)
if (prev) {

//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

//if prev is set to 0 (next item)
} else {

//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}

//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');

//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');

//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);

}
</script>

и собственно сами новости или реклама

в Объявление:

    <div id="slider">
      <div id="mask-gallery">

    <ul id="gallery">
        <li><img src="фоновое изображение для первой новости" width="400" height="250" alt=""/></li>
        <li><img src="фоновое изображение для второй новости" width="400" height="250" alt=""/></li>
        <li><img src="фоновое изображение для третьей новости" width="400" height="250" alt=""/></li>

    </ul>
    </div>

    <div id="mask-excerpt">
    <ul id="excerpt">
        <li>Текст первой новости.</li>
                    <li>Текст второй новости.</li>
        <li>Текст третьей новости.</li>
    </ul>
    </div>

    </div>

    <div id="buttons">
    <a href="#" id="btn-prev">prev</a>
    <a href="#" id="btn-pause">pause</a>
    <a href="#" id="btn-play">play</a>
    <a href="#" id="btn-next">next</a>

    </div>

сам блок новостей можно сделать по центру Объявления или сместить куда вам нужно
можно так же менять его размеры (выделил жёлтым)
надписи Next - Prev - Play - Pause тоже можно сменить на картинки
цвет шрифта в новостях можно менять
количество новостей с трёх увеличить до нужного вам
можно так же любую новость сделать кликабельной (нажав переходишь к более подробному прочтению)
и т.д.

ПРИМЕР
ПРИМЕР 2

0

Страница: 1

Вы здесь » kota007 » Слайдеры новостей » 2

Рейтинг форумов | Создать форум бесплатно