تغير تلقائي للصور بصيغة الjquery

01‏/07‏/2010





كود ال jquery





<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>






+





<script type='text/javascript'>



//<![CDATA[



$(document).ready(function() {



    //Set Default State of each portfolio piece



    $(".paging").show();



    $(".paging a:first").addClass("active");







    //Get size of images, how many there are, then determin the size of the image reel.



    var imageWidth = $(".window").width();



    var imageSum = $(".image_reel img").size();



    var imageReelWidth = imageWidth * imageSum;



  



    //Adjust the image reel to its new size



    $(".image_reel").css({'width' : imageReelWidth});



  



    //Paging + Slider Function



    rotate = function(){



        var triggerID = $active.attr("rel") - 1; //Get number of times to slide



        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide







        $(".paging a").removeClass('active'); //Remove all active class



        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)







        //Slider Animation



        $(".image_reel").animate({



            left: -image_reelPosition



        }, 500 );







    };



  



    //Rotation + Timing Event



    rotateSwitch = function(){



        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds



            $active = $('.paging a.active').next();



            if ( $active.length === 0) { //If paging reaches the end...



                $active = $('.paging a:first'); //go back to first



            }



            rotate(); //Trigger the paging and slider function



        }, 7000); //Timer speed in milliseconds (3 seconds)



    };



  



    rotateSwitch(); //Run function on launch



  



    //On Hover



    $(".image_reel a").hover(function() {



        clearInterval(play); //Stop the rotation



    }, function() {



        rotateSwitch(); //Resume rotation



    });



  



    //On Click



    $(".paging a").click(function() {



        $active = $(this); //Activate the clicked paging



        //Reset Timer



        clearInterval(play); //Stop the rotation



        rotate(); //Trigger rotation immediately



        rotateSwitch(); // Resume rotation



        return false; //Prevent browser jump to link anchor



    });



  



});



  //]]>



</script>

  



كود ال CSS





/*--Main Container--*/

.main_view {

float: left;

position: relative;

}

<style type='text/css'>

.main_view {

float: left;

position: relative;

}



.window {

height:289px;    width: 790px;

 border:1px solid #333;

overflow: hidden;

position: relative;

}

.image_reel {

position: absolute;

top: 0; left: 0;

}

.image_reel img {float: left;}



.paging {

position: absolute;

bottom: 40px; right: -1px;

width: 220px; height:41px;

z-index: 100;

text-align: center;

line-height: 40px;

background:url(https://lh6.googleusercontent.com/-oFeUnLHUM90/TYfNo4qTweI/AAAAAAAAASM/IgxVCv7svgA/d/transparence.png);

-moz-border-radius-topleft: 15px;

-moz-border-radius-bottomleft: 15px;

-webkit-border-radius-bottomleft: 15px;

-webkit-border-radius-topleft: 15px;

border:2px solid #000;

display: none;

}

.paging a {

outline:none;

padding: 5px 10px;

text-decoration: none;

color: #000;

}

.paging a.active {

font-weight: bold;

border:1px solid #333;

color: #fff;

background: #000;

border: 1px solid #000;

-moz-border-radius: 17px;

-khtml-border-radius: 17px;

-webkit-border-radius: 17px;

}

.paging a:hover {font-weight: bold;}



كود ال HTML




<div class="main_view"><div class="window"><div class="image_reel"><img src="http://4.bp.blogspot.com/_q4j3j-JA2ro/....jpg" alt="" /><img src="
http://4.bp.blogspot.com/_q4j3j-JA2ro/....jpg" alt="" /><img src="http://4.bp.blogspot.com/_q4j3j-JA2ro/....jpg" alt="" /><img src="http://4.bp.blogspot.com/_q4j3j-JA2ro/....jpg" alt="" /> </div></div><br />



<div class="paging"><a href="http://blogspacetech.blogspot.com/" rel="1">1</a><a href="http://blogspacetech.blogspot.com/" rel="2">2</a><a href="#" rel="3">3</a><a href="http://blogspacetech.blogspot.com/" rel="4">4</a></div></div>

<div style='clear: both;'></div>


انتهى