Воскресенье, 25 Марта 2012 11:47

Простой слайдер новостей

Written by 
Оцени эту запись
(7 Голоса)

Задача – сделать для сайта галерею. Это может быть простой слайдер фотографий, слайдер новостей с фото и названием статьи и т.д.

Для этого можно найти готовый плагин, которых множество в сети, и подключить его.

http://cake-php-blog.net/25-jquery-sliders

http://websd.ru/page/24-slajder-plagina-na-jquery-jquery-slider-plugins

 

В моем случае не хотелось использовать готовый плагин, дабы не подключать лишних файлов. Потому решила сделать более простой вариант.

 

Результат: слайдер новостей. Отображается большое фото из новости, фото автоматически меняется.

 

Простой слайдер новостей

 

Сбоку переключатели, по которым можно переходить по фоткам. При наведении на переключатели, появляется превью фото с названием новости и кратким содержанием.

 

HTML:

<div class="home_slider" style="margin: 10px auto; width: 640px; padding: 10px; background: #fff;">

                        <div class="home_slider_cont">

                          <div class="slider_control">

                            <div class="slider_control_cont">

                                <div class="slider_control_cont_inner">

                                    <ul class="slider_cont_pan">

                                        <li class="active"><a class="slide1" href="javascript: void(0);">&nbsp;</a></li>

                                        <li><a class="slide2" href="javascript: void(0);">&nbsp;</a></li>

                                        <li><a class="slide3" href="javascript: void(0);">&nbsp;</a></li>

                                        <li><a class="slide4" href="javascript: void(0);">&nbsp;</a></li>

                                        <li><a class="slide5" href="javascript: void(0);">&nbsp;</a></li>

                                    </ul>

                                </div>

                            </div>

                          </div>

                          <div class="slider_body">

                            <div class="slider_body_item">

                                <div class="body_slide1 slider_item slider_show" style="display: block;">

                                    <img src="/images/home_slider1.jpg" />

                                </div>

                            </div>

                            <div class="slider_body_item">

                                <div class="body_slide2 slider_item">

                                    <img src="/images/home_slider2.jpg" />

                                </div>

                            </div>

                            <div class="slider_body_item">

                                <div class="body_slide3 slider_item">

                                    <img src="/images/home_slider3.jpg" />

                                </div>

                            </div>

                            <div class="slider_body_item">

                                <div class="body_slide4 slider_item">

                                    <img src="/images/home_slider4.jpg" />

                                </div>

                            </div>

                            <div class="slider_body_item last">

                                <div class="body_slide5 slider_item">

                                    <img src="/images/home_slider5.jpg" />

                                </div>

                            </div>

                            </div>

                            <div class="slider_body_small">

                            <div class="slider_body_small_item">

                                <div class="body_smal_slide1 slider_item_small">

                                    <img src="/images/home_slider1_small.png" />

                                    <p class="sl_sm_n"><a href="#">PRETTY CATS</a></p>

                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>

                                </div>

                            </div>

                            <div class="slider_body_small_item">

                                <div class="body_smal_slide2 slider_item_small">

                                    <img src="/images/home_slider2_small.png" />

                                    <p class="sl_sm_n"><a href="#">PRETTY CATS</a></p>

                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>

                                </div>

                            </div>

                            <div class="slider_body_small_item">

                                <div class="body_smal_slide3 slider_item_small">

                                    <img src="/images/home_slider3_small.png" />

                                    <p class="sl_sm_n"><a href="#">PRETTY CATS</a></p>

                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>

                                </div>

                            </div>

                            <div class="slider_body_small_item">

                                <div class="body_smal_slide4 slider_item_small">

                                    <img src="/images/home_slider4_small.png" />

                                    <p class="sl_sm_n"><a href="#">PRETTY CATS</a></p>

                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>

                                </div>

                            </div>

                            <div class="slider_body_small_item">

                                <div class="body_smal_slide5 slider_item_small">

                                    <img src="/images/home_slider5_smal.png" />

                                    <p class="sl_sm_n"><a href="#">PRETTY CATS</a></p>

                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>

                                </div>

                            </div>

                          </div>

                        </div>   

                    </div>

 

Здесь список с классом slider_cont_pan– это список ссылок, которые являются переключателями.  Блок с классом slider_body– это контейнер содержащий большие фото. Каждое фото лежит в блоке slider_body_item. Дальше есть блок с классом slider_body_small– это блок, содержащий превьюшки.  Контейнеры slider_body_small_itemсодержат маленькие фото, название статьи и краткое содержание. Эти контейнеры появляются при наведении на переключатели и пропадают, когда мышка уходит.

 

jQuery скрипт:

 

<script type="text/javascript">

                                               $(document).ready(function (){

                                                               setInterval(function(){

                                                                              var $active = $('.slider_body_item .slider_item.slider_show');

                                                                              var $active_l = $('.slider_cont_pan li.active');

                                                                              var $first = $('.slider_body_item .slider_item.body_slide1');

                                                                              var $first_l = $('.slider_cont_pan li a.slide1').parent();

                                                                              var $next = $active.parent().next().children();

                                                                              var $next_l = $active_l.next();   

                                                                              if ($next.length != 0) {

                                                                                              $next.addClass('slider_show');

                                                                                              $next_l.addClass('active');

                                                                                              } else {

                                                                                                              $first.addClass('slider_show');

                                                                                                              $first_l.addClass('active');

                                                                                                              }

                                                                                              $active.removeClass('slider_show');

                                                                                              $active_l.removeClass('active');

                                                                                              $('.slider_item').fadeOut(500);

                                                                                              $('.slider_item.slider_show').fadeIn(1500);

                                                               },5000);

                                                              

                                                                             

                                                              

                                                               $('.slider_cont_pan li a').click(function(){

                                                                              $('.slider_item').fadeOut(500);

                                                                              $('.slider_item').removeClass('slider_show');

                                                                              $('.slider_cont_pan li').removeClass('active');

                                                                              $('.body_'+this.className).fadeIn(1500);

                                                                              $(this.parentNode).addClass('active');

                                                                              $('.body_'+this.className).addClass('slider_show');

                                                                              });

                                                               $('.slider_cont_pan li a').mouseover(function(){

                                                                              $('.slider_body_small').fadeIn(50);

                                                                              $('.slider_item_small').fadeOut(700);

                                                                              $('.body_smal_'+this.className).fadeIn(700);

                                                                              });

                                                               $('.slider_cont_pan li a').mouseleave(function(){

                                                                              $('.slider_body_small').mouseleave(function(){

                                                                                              $('.slider_body_small').fadeOut(50);

                                                                              });

                                                                              });

                                                               });

                               </script>

 

Этот скрипт вставляется в тело документа, то есть в body.

При этом не забудьте подключить библиотеку jQuery.  Для этого в headдокумента нужно прописать путь к файлу библиотеки:
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>

 

Ну и, конечно, слайдер нужно оформить. Для этого приписываем для всего выше упомянутого стилизацию:

.home_slider_cont {width: 640px; height: 265px; position: relative;}

.slider_control {position: absolute; top: 72px; left: 0px; width: 20px; background: url(../images/sl_cont_bg_top.png) top left no-repeat; padding-top: 19px; z-index: 999;}

.slider_control_cont {width: 20px; background: url(../images/sl_cont_bg_bottom.png) bottom left no-repeat; padding-bottom: 19px;}

.slider_control_cont_inner {background: url(../images/sl_cont_bg.png) left repeat-y;}

.slider_control_cont_inner ul {margin: auto 0; padding: 5px 0 5px 0; list-style: none;}

.slider_control_cont_inner ul li {padding: 4px 0 4px 0px;}

.slider_control_cont_inner ul li a {

                width: 7px;

                height: 7px;

                display: block;  

                background: url(../images/slider_control.png);

                text-decoration: none;

               

}

.slider_control_cont_inner ul li.active a, .slider_control_cont_inner ul li a:hover {background: url(../images/slider_control_a.png);}

.slider_body {position: relative; width: 640px; height: 265px; overflow: hidden;}

.slider_body_item {position: absolute; width: 640px; height: 265px; top: 0px; left: 0px;}

.slider_item {display: none;}

 

 

.slider_item_small {

                display: none;

                font-family: Tahoma, Geneva, sans-serif;

                font-size: 11px;

                color: #666;

                z-index: 900;

                position: absolute;

                left: 0px;

                top: 0px;

                width: 170px;

                padding: 10px 10px 10px 20px;

}

.slider_body_small {

                position: absolute;

                left: 0px;

                top: 75px;

                background: white;

                width: 188px;

                height: 150px;

}

 

.sl_sm_n a {

                font-size: 14px;

                font-family: 'PT Sans Caption', sans-serif;

                font-weight: bold;

                color: #555;

}

 

Слайдер готов. Пользуйтесь на здоровье. 

 

 

Демо: скроллер картинок

Additional Info

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов