Делаем элементарный слайдер на jQuery

Posted Wed, 11/09/2011 - 11:45

Пишем простой слайдер на jQuery. Итак приступим. Первым делом не забудьте подключить самуму библиотеку jQuery!

HTML:

<div class="videos">
  <div class="cover">
    <div class="mystuff">some content</div>
    <div class="mystuff">some content</div>
  </div>
</div>

<div class="buttons">
<a class="button1 active" rel="1" href="#" onclick="return false;">Button_1</a>
<a class="button2" rel="2" href="#" onclick="return false;">Button_1</a>
<a class="button3" rel="3" href="#" onclick="return false;">Button_1</a>
</div>

CSS:

.videos {
    position: relative;
    top: 80px;
    left: 52.5px;
    height: 135px;
    width: 875px;
    overflow: hidden;
}

.videos .cover {
    width: 3500px;
    position: absolute;
    height: 120px;
}

.videos .mystuff {
    width: 875px;
    height: 135px;
    float: left;
}

JS:

$(document).ready(function (){
    $('.goluboi a').click(function(){
        var integer = $(this).attr('rel');
        $('.videos .cover').animate({left:-875*(parseInt(integer)-1)});
        $('.goluboi a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });
});

Вот и все, наш слайдер готов.

Comments

Anonymous's picture

re

by Anonymous - 12/19/2011 - 14:29

no matter what is a topic of your paper just because premium custom organizations offer to buy essays of supreme quality.