<!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="data: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>

3D旋转特效的更多相关文章

  1. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 制作3D图片立方体旋转特效

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CS ...

  4. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  5. 基于jQuery 3D旋转明星人物展示特效

    分享一款基于jQuery 3D旋转明星人物展示特效.这是一款来自百度换肤活动的明星旋转展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  7. 3D HTML5 Logo标志 超炫酷旋转特效

    今天又要为大家带来一款超酷的HTML5 Canvas 3D动画特效,是一款可以旋转的HTML5 Logo标志.画面上一共有两块可旋转的区域,第一是可旋转的背景,第二则是可旋转的Logo标志.Logo标 ...

  8. jquery环形3D立体旋转特效

      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...

  9. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

随机推荐

  1. 安装oracle pl/sql developer

    1.在官网上下载oracle 11g R2版本的数据库,直接常规安装.数据库可以下载32bit. 2.在这里下载oracle client (32bit)http://www.oracle.com/t ...

  2. O-c中类的继承与派生的概念

    什么是继承 众所周知,面向对象的编程语言具有: 抽象性, 封装性, 继承性, 以及多态性 的特征. 那么什么是继承呢? 传统意义上是指从父辈那里获得父辈留下的东西 在开发中, 继承就是"复用 ...

  3. struts1、 struts2所有版本jar包下载地址大全

     jakarta-struts-1.2.2.tar.gz      30-Aug-2004 18:21   12M  jakarta-struts-1.2.2.tar.gz.asc  30-Aug-2 ...

  4. Ubuntu系统的安装

    在上一篇博客中,我们已经建立了一个“空白”的虚拟Ubuntu镜像,在这篇博客中,我们将介绍如何安装并进入完整的Ubuntu系统. 写在前面:不同版本的系统在安装过程中,有些操作可能会不同,但是其核心步 ...

  5. ASP.NET数据绑定控件

    数据绑定控件简介 数据绑定分为:数据源 和 数据绑定控件 两部分,数据绑定控件通过数据源来获得数据,通过数据源来隔离数据提供者和数据使用者,数据源有:SqlDataSource,AccessDataS ...

  6. std::string stringf(const char* format, ...)

    std::string stringf(const char* format, ...){ va_list arg_list; va_start(arg_list, format); // SUSv2 ...

  7. PHP学习笔记(2) - 对PHP的印象

    一.PHP是一种简单易学的面向过程的弱类型动态脚本语言,本为制作简单的个人网站而开发,现如今经过多个版本的衍变甚至加入了一些面向对象的特性.PHP试图通过发展打进企业级开发,同时也使得它自身也越来越复 ...

  8. 关于mac上的homebrew

    首先它的安装指令并不难: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...

  9. Sqlserver 原生 MD5 函数(转)

    --创建md5函数CREATE FUNCTION [dbo].[MD5](@src varchar(255) )RETURNS varchar(255)ASBEGIN    DECLARE @md5 ...

  10. C语言-02基本运算

    1.除法运算 / 整数除于整数,还是整数.参与运算的操作数必须是同类型. 1/2的值是0.参与运算的操作数是什么类型,得出的值就是什么类型.   10.5 + 10将右边的10提升为了double类型 ...