3D旋转特效

<!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>photos</title>
<meta name="description" content="3D旋转木马图片展示效果代码" />

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background-color:#F1F1F1;}
/* wide-wrapper */
#wide-wrapper{background:url(images/bg.jpg) repeat-x;height:600px;}
#header{width:280px;margin:0px auto;padding-top:75px;}
#carousel{width:870px;height:450px;margin:0px auto;padding:0px;}
#carousel{list-style:none;padding:0px;}
#carousel li{float:left;}
#carousel .tooltip, #carousel .bigImage, #carousel .title, #carousel .description{position:absolute;left:-9999px;}
</style>

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

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

<script type="text/javascript">
$(document).ready(function($){

    $('#carousel').carousel({
        width: 870, 
        height: 350, 
        itemWidth:120, 
        horizontalRadius:270, 
        verticalRadius:85, 
        resize:false, 
        mouseScroll:false, 
        mouseDrag:true, 
        scaleRatio:0.4, 
        scrollbar:true, 
        tooltip:true, 
        mouseWheel:true, 
        mouseWheelReverse:true
    });
    
});
</script>

</head>

<body>

    <div id="wide-wrapper">
    
        <div id="header">
            <img src="images/a-2.png" width="280" height="50" alt="3d carousel"/>
        </div>
    
        <ul id="carousel">
            <li>
                <a href="../会电2班.html"><img src="修改好的图片/陈美玲.jpg"/></a>
                <div class="tooltip">陈美玲</div>
            </li>
            <li><img src="修改好的图片/刘彤彤.jpg" alt=""/>
            <div class="tooltip">刘彤彤</div></li>
            <li><img src="修改好的图片/高丰.png" alt=""/>
            <div class="tooltip">高丰</div></li>
             <li><img src="修改好的图片/韩宝丽.jpg" alt=""/>
            <div class="tooltip">韩宝丽</div></li>
             <li><img src="修改好的图片/韩贵芹.jpg" alt=""/>
            <div class="tooltip">韩贵芹</div></li>
             <li><img src="修改好的图片/侯玉芳.jpg" alt=""/>
            <div class="tooltip">侯玉芳</div></li>
            
              <li><img src="修改好的图片/康议方.jpg" alt=""/>
            <div class="tooltip">康议方</div></li>
            <li>
                <img src="修改好的图片/郎春华.jpg"alt=""/>
                <div class="tooltip">郎春华</div>
            </li>
            <li><img src="修改好的图片/李佳真.jpg" alt=""/>
             <div class="tooltip">李佳真</div>
             </li>
             <li><img src="修改好的图片/李宁.jpg" alt=""/>
             <div class="tooltip">李宁</div>
             </li>
             <li><img src="修改好的图片/李苹.jpg" alt=""/>
            <div class="tooltip">李苹</div></li>
            <li><img src="修改好的图片/李雪.jpg" alt=""/>
             <div class="tooltip">李雪</div></li>
          
            <li><img src="修改好的图片/林浩.jpg"alt=""/>
             <div class="tooltip">林浩</div></li>
             <li><img src="修改好的图片/刘美佳.jpg"alt=""/>
             <div class="tooltip">刘美佳</div></li>
             <li><img src="修改好的图片/刘天宝.jpg"alt=""/>
             <div class="tooltip">刘天宝</div></li>
             <li>
                <img src="修改好的图片/满荞荞.jpg" alt=""/>
                 <div class="tooltip">满荞荞</div>
            </li>
              
            
            <li>
                <img src="修改好的图片/乔彭真.jpg" alt=""/>
                 <div class="tooltip">乔彭真</div>
            </li>
             <li><img src="修改好的图片/邱祉聪.jpg" alt=""/>
             <div class="tooltip">邱祉聪</div></li>
            <li><img src="修改好的图片/沈聪.jpg" alt=""/>
             <div class="tooltip">沈聪</div></li>
           
            
            
            
            
            <li>
                <img src="修改好的图片/王红.jpg" alt=""/>
                <div class="tooltip">王红</div>
            </li>
            <li><img src="修改好的图片/王晶晶.jpg" alt=""/>
             <div class="tooltip">王晶晶</div>
             </li>
              <li>
                <img src="修改好的图片/邢晨.png"alt=""/>
                <div class="tooltip">邢晨</div>
            </li>
            
            
            <li>
                <img src="修改好的图片/徐婷.jpg" alt=""/>
                <div class="tooltip">徐婷</div>
            </li>
            <li><img src="修改好的图片/许嘉.jpg"alt=""/> <div class="tooltip">许嘉</div></li>
            <li><img src="修改好的图片/于珊珊.jpg" alt=""/>
             <div class="tooltip">于珊珊</div></li>
             <li><img src="修改好的图片/赵杰.jpg" alt=""/>
             <div class="tooltip">赵杰</div></li>
            
            <li><img src="修改好的图片/赵艺丹.jpg"alt=""/>
            <div class="tooltip">赵艺丹</div> </li>
            
        </ul>
    </div>

</body>
</html>

 

posted @ 2015-05-14 12:40  XCml  阅读(244)  评论(0编辑  收藏  举报