jquery 图片360度旋转效果

2019PHP高薪工程师学习路线图....>>>

其中js类库,图片都自己去找,不影响


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery制作一个漂亮的手机软件</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<div class="weiduduan clearfix">
  <div id="phoneCarousel">
    <div class="previous arrow">&nbsp;</div>
    <div class="next arrow">&nbsp;</div>
    <div id="stage">
         <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/iphone.png" alt="iPhone" id="iphone" class="default" /></a>
         <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/nexus_one.png" alt="Nexus One" id="nexus" /> </a>
         <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/nokia.png" alt="Nokia" id="nokia" /> </a>
         <a href="http://www.jq22.com/" target="_blank" ><img width="270" height="400" src="images/blackberry.png" alt="BlackBerry" id="blackberry" /></a></div>
  </div>
  <script type="text/javascript" src="js/script.js"></script> 
</div> 

</body>
</html>



basic.css

@charset "utf-8";


/* reset */
body{font:12px/18px arial,sans-serif;color:#585858;}

body,div,p,span,form,iframe,table,td,th,input,textarea,button,label,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%; }
ul,ol,li,dl{list-style-type:none;}
em,i,dfn,cite,strong,small{font-style:normal;} 
img{border:0;}
fieldset,button,input,select,option{vertical-align:middle;font:12px/18px arial,sans-serif;}
table{border-collapse:collapse;border-spacing:0}
textarea{resize:none}

/* color */
a:link,a:visited{color:#575757;text-decoration:none;}
a:hover{color:#ef4165;text-decoration:none;}
a:active{color:#1d7400;}

/* clearfix */
.clearfix{ *zoom:1;}
.clearfix:after{display:table; line-height:0; content:""; clear:both;}

/* public.omission */
.fl{ float:left;}            .fr{ float:right;}            .tc{ text-align:center;}      .tr{ text-align:right;} 
.fb{ font-weight:bold;}      .f12{ font-size:12px;}        h3{ font-weight:normal;}      .listop{ padding-top:15px;}
.mr10{ margin-right:10px;}   .mr15{ margin-right:15px;}    .mL10{ margin-left:10px;}     .mL15{ margin-left:15px;}
.mt10{ margin-top:10px;}     .mt15{ margin-top:15px;}      .mb10{ margin-bottom:10px;}   .mb15{ margin-bottom:15px;}


.weiduduan{ width:800px; margin:50px auto 0 auto;}
#phoneCarousel{height:390px;margin:0 auto;position:relative;width:800px;}
#phoneCarousel .arrow{width:44px;height:44px;background:url(../images/arrows.png) no-repeat;position:absolute;top:50%;margin-top:-22px;left:0;cursor:pointer;}

#phoneCarousel .next{background-position:right top;left:auto;right:0;}
#phoneCarousel .arrow:hover{background-position:left bottom;}
#phoneCarousel .next:hover{background-position:right bottom;}
#stage{left:50%;margin-left:-350px;position:absolute;width:700px;height:100%;}
#stage img{display:none;}
#stage .default{display:block;left:50%;margin-left:-135px;position:absolute;}
#stage .animationReady{display:block;position:absolute;top:0;left:0;}


script.js

$(document).ready(function(){
    var deg=0;
    /* Storing all the images into a variable */

    var images    = $('#stage img').removeClass('default').addClass('animationReady');
    var dim        = { width:images.width(),height:images.height()};
    
    var cnt = images.length;
    
    /* Finding the centers of the animation container: */
    var centerX = $('#stage').width()/2;
    var centerY = $('#stage').height()/2 - dim.height/2;

    function rotate(step,total){
        // This function loops through all the phone images, and rotates them
        // with "step" degrees (10 in this implementation) until total has reached 0
    
        /* Increment the degrees: */
        deg+=step;
        
        var eSin,eCos,newWidth,newHeight,q;
        
        /* Loop through all the images: */
        for(var i=0;i<cnt;i++){
            
            /* Calculate the sine and cosine for the i-th image */
            
            q = ((360/cnt)*i+deg)*Math.PI/180;
            eSin        = Math.sin(q);
            eCos        = Math.cos(q);
            
            /*
            /    With the sine value, we can calculate the vertical movement, and the cosine 
            /    will give us the horizontal movement.
            */
            
            q = (0.6+eSin*0.4);
            newWidth    = q*dim.width;
            newHeight    = q*dim.height;
            
            /*
            /    We are using the calculated sine value (which is in the range of -1 to 1)
            /    to calculate the opacity and z-index. The front image has a sine value
            /    of 1, while the backmost one has a sine value of -1.
            */
            
            images.eq(i).css({
                top            : centerY+15*eSin,
                left        : centerX+200*eCos,
                opacity        : 0.8+eSin*0.2,
                marginLeft    : -newWidth/2,
                zIndex        : Math.round(80+eSin*20)
            }).width(newWidth).height(newHeight);
        }

        total-=Math.abs(step);
        if(total<=0) return false;
        
        // Setting the function to be run again in 40 seconds (equals to 25 frames per second):
        setTimeout(function(){rotate(step,total)},40);
    
    }
    
    // Running the animation once at load time (and moving the iPhone into view):
    rotate(10,360/cnt);
    
    $('#phoneCarousel .previous').click(function(){
        // 360/cnt lets us distribute the phones evenly in a circle
        rotate(-10,360/cnt);
    });
    
    $('#phoneCarousel .next').click(function(){
        rotate(10,360/cnt);
    });
    $('#phoneCarousel .previous,#phoneCarousel .next').hover(function(){
        clearInterval(timer);
        },function(){
        timer=setInterval(function(){rotate(10,360/cnt);},4000);
        });
    var timer=null;
    
        timer=setInterval(function(){rotate(10,360/cnt);},4000);
});