ساخت اسلایدشو چرخان

ساخت اسلایدشو چرخان

ما در این آموزش به شما نحوه ساخت یک اسلایدشو زیبا رو میدیم که در انها تصاویر روی یک ضلعشان چرخیده و جای خود را به عکس بعدی می دهند.

برای مشاهده لینک وارد شود

مثل همیشه ما ابتدا کدهای HTML مورد نیاز برای ساخت اسلایدشو مورد نظر را مینویسیم.بخش مهم این کد تگ slideShowContainer# است که تگ slideShow# و کلید های قبل/بعد را نگه میدارند.

index.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Slideshow With jQuery and CSS3 | 8np 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>

سپس ما کدهای CSS مربوط به اسلایدشو را مینویسیم

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;
}

خوب اکنون بخش اصلی کدمان را مینویسیم یعنی کد های jQuery

اکثر مرورگر های جدید از قابلیت چرخش(rotation) در CSS3 پشتیبانی میکنند ولی این قابلیت کمتر مورد استفاده قرار می گیرد.

ما از پلاگین چرخش jQuery برای راحت تر کردن کارمان در چرخش تصاویر استفاده کردیم.همانطور که در ادامه خواهید دید ما  از ایونت custom rotateContainer برای چرخاندن تگ slideShow استفاده خواهیم کردیم.

script.js

$(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		: ۵۱۰,
                height		: ۵۱۰,
                marginTop	: ۰,
                marginLeft	: ۰
            },'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		: ۴۹۰,
                    height		: ۴۹۰,
                    marginTop	: ۱۰,
                    marginLeft	: ۱۰
                },'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]);
        });
    }
 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;
        });
    }

});

پایان

 

+2
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


9 + پنج =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>