Простой слайдер на jQuery - easy slider - с элементами навигации по изображениям. У слайдера около 20 настроек.

Разметка HTML

    <div id="content">
        <div id="slider">
            <ul>               
                <li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/05.jpg" alt="" /></a></li>           
            </ul>
        </div>
    </div>

CSS

   /* image replacement */
    #prevBtn, #nextBtn, #slider1prev, #slider1next{
        margin:0;
        padding:0;
        display:block;
        overflow:hidden;
        text-indent:-8000px;
        }
    /* // image replacement */
           
    #container{   
        margin:0 auto;
        position:relative;
        text-align:left;
        width:696px;
        margin-bottom:2em;
        }   
                   
    #contents{
        position:relative;
        }           

/* Easy Slider */

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider2{margin-top:1em;}
    #slider li, #slider2 li{
        /*
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */
        width:696px;
        height:241px;
        overflow:hidden;
        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:-30px;
        top:144px;
        z-index:1000;
        }   
    #nextBtn, #slider1next{
        left:696px;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{ 
        display:block;
        position:relative;
        width:30px;
        height:77px;
        background:url('../images/btn_prev.png') no-repeat 0 0;   
        }   
    #nextBtn a, #slider1next a{
        background:url('../images/btn_next.png') no-repeat 0 0;   
        }   
       
    /* numeric controls */   

    ol#controls{
        margin:1em 0;
        padding:0;
        height:28px;   
        }
    ol#controls li{
        margin:0 10px 0 0;
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a{
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a{
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

javascript

Подключаем jQuery и плагин:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/easySlider1.7.js"></script>

Инициализируем слайдер:
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true,
                continuous: true
            });
        });   

Опции по умолчанию:

  • prevId:         'prevBtn',
  • prevText:         'Previous',
  • nextId:         'nextBtn',
  • nextText:         'Next',
  • controlsShow:    true,
  • controlsBefore:    '',
  • controlsAfter:    '',   
  • controlsFade:    true,
  • firstId:         'firstBtn',
  • firstText:         'First',
  • firstShow:        false,
  • lastId:         'lastBtn',   
  • lastText:         'Last',
  • lastShow:        false,               
  • vertical:        false,
  • speed:             800,
  • auto:            false,
  • pause:            2000,
  • continuous:        false,
  • numeric:         false,
  • numericId:         'controls'

Офф. страница плагина: тынц

СКАЧАТЬСкачек: 7181
262,43 Kb
Кто скачал?

ДЕМОПосмотреть
пример