Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Вращение изображения в слайд-шоу - CSS3 и JQuery

Вращение изображения в слайд-шоу - CSS3 и JQuery


Демо: смотреть
Скачать: rotating-slideshow.zip [395,84 Kb] (cкачиваний: 125)


Сегодня мы собираемся использовать JQuery и CSS3 повороты картинок, будем использовать JQuery плагин вращения , для создания красивых слайд-шоу. Вы можете использовать его, чтобы "оживить" свой веб-сайт, страницы с описанием товара и другие проекты с некоторыми CSS3 эффектами.

HTML
Следуя традиции, мы сначала начнем с разметки HTML слайд-шоу. Основной тег у нас будет див с ид #slideShowContainer который содержит стрелки вперед и назад и изображение слайдов.

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Slideshow With jQuery and CSS3 | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>

<div id="slideShowContainer">

    <div id="slideShow">

        <ul>
            <li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
            <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
            <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
            <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
        </ul>

    </div>

    <a id="previousLink" href="#">»</a>
    <a id="nextLink" href="#">«</a>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery.rotate.js"></script>
<script src="js/script.js"></script>

</body>
</html>


Вращение изображения в слайд-шоу - CSS3 и JQuery


styles.css
Как всегда украшаем наш слайдер стилями.
#slideShowContainer{
    width:510px;
    height:510px;
    position:relative;
    margin:120px auto 50px;
}

#slideShow{
    position:absolute;
    height:490px;
    width:490px;
    background-color:#fff;
    margin:10px 0 0 10px;
    z-index:100;

    -moz-box-shadow:0 0 10px #111;
    -webkit-box-shadow:0 0 10px #111;
    box-shadow:0 0 10px #111;
}

#slideShow ul{
    position:absolute;
    top:15px;
    right:15px;
    bottom:15px;
    left:15px;
    list-style:none;
    overflow:hidden;
}

#slideShow li{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#slideShowContainer > a{
    border:none;
    text-decoration:none;
    text-indent:-99999px;
    overflow:hidden;
    width:36px;
    height:37px;
    background:url('../img/arrows.png') no-repeat;
    position:absolute;
    top:50%;
    margin-top:-21px;
}

#previousLink{
    left:-38px;
}

#previousLink:hover{
    background-position:bottom left;
}

a#nextLink{
    right:-38px;
    background-position:top right;
}

#nextLink:hover{
    background-position:bottom right;
}


Результат:
Вращение изображения в слайд-шоу - CSS3 и JQuery


jQuery
script.js – Part 1
$(document).ready(function(){

    var slideShow = $('#slideShow'),
        ul = slideShow.find('ul'),
        li = ul.find('li'),
        cnt = li.length;

    // As the images are positioned absolutely, the last image will be shown on top.
    // This is why we force them in the correct order by assigning z-indexes:

    updateZindex();

    if($.support.transform){

        // Modern browsers with support for css3 transformations

        li.find('img').css('rotate',function(i){
            // Rotating the images counter-clockwise
            return (-90*i) + 'deg';
        });

        // Binding a custom event. the direction and degrees parameters
        // are passed when the event is triggered later on in the code.

        slideShow.bind('rotateContainer',function(e,direction,degrees){

            // Zooming in the slideshow:

            slideShow.animate({
                width        : 510,
                height        : 510,
                marginTop    : 0,
                marginLeft    : 0
            },'fast',function(){

                if(direction == 'next'){

                    // Moving the topmost image containing Li at
                    // the bottom after a fadeOut animation

                    $('li:first').fadeOut('slow',function(){
                        $(this).remove().appendTo(ul).show();
                        updateZindex();
                    });
                }
                else {

                    // Showing the bottommost Li element on top
                    // with a fade in animation. Notice that we are
                    // updating the z-indexes.

                    var liLast = $('li:last').hide().remove().prependTo(ul);
                    updateZindex();
                    liLast.fadeIn('slow');
                }

                // Rotating the slideShow. css('rotate') gives us the
                // current rotation in radians. We are converting it to
                // degrees so we can add +90 or -90.

                slideShow.animate({
                    rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
                },'slow').animate({
                    width        : 490,
                    height        : 490,
                    marginTop    : 10,
                    marginLeft    : 10
                },'fast');
            });
        });

        // By triggering the custom events below, we can
        // show the previous / next images in the slideshow.

        slideShow.bind('showNext',function(){
            slideShow.trigger('rotateContainer',['next',90]);
        });

        slideShow.bind('showPrevious',function(){
            slideShow.trigger('rotateContainer',['previous',-90]);
        });
    }


Вращение изображения в слайд-шоу - CSS3 и JQuery


script.js – Part 2
    else{
        // Fallback for Internet Explorer and older browsers

        slideShow.bind('showNext',function(){
            $('li:first').fadeOut('slow',function(){
                $(this).remove().appendTo(ul).show();
                updateZindex();
            });
        });

        slideShow.bind('showPrevious',function(){
            var liLast = $('li:last').hide().remove().prependTo(ul);
            updateZindex();
            liLast.fadeIn('slow');
        });
    }

    // Listening for clicks on the arrows, and
    // triggering the appropriate event.

    $('#previousLink').click(function(){
        if(slideShow.is(':animated')){
            return false;
        }

        slideShow.trigger('showPrevious');
        return false;
    });

    $('#nextLink').click(function(){
        if(slideShow.is(':animated')){
            return false;
        }

        slideShow.trigger('showNext');
        return false;
    });

    // This function updates the z-index properties.
    function updateZindex(){

        // The CSS method can take a function as its second argument.
        // i is the zero-based index of the element.

        ul.find('li').css('z-index',function(i){
            return cnt-i;
        });
    }

});


Демо: смотреть
Скачать: rotating-slideshow.zip [395,84 Kb] (cкачиваний: 125)


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

Как бы вы улучшить этот пример? Поделитесь своими мыслями в комментариях ниже.
Опубликовал dimas_ua, 20-03-2011, 00:00 Комментариев: 0
 (голосов: 0)