zoukankan      html  css  js  c++  java
  • jquery roundabout幻灯片插件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>jquery-roundabout</title> 
    
    <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:#ddd;}
    /* roundabout */
    .roundabout-holder{850px;height:496px;margin:0 auto;}
    .roundabout-moveable-item{646px;height:416px;cursor:pointer;border:3px solid #ccc;border:3px solid rgba(0, 0, 0, 0.08);border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
    .roundabout-moveable-item img{100%;}
    .roundabout-in-focus{border:3px solid rgba(0, 0, 0, 0.2);}
    </style> 
    
    </head> 
    <body> 
    
        <ul class="roundabout" id="myroundabout"> 
            <li><img src="img/slide1.jpg"></li> 
            <li><img src="img/slide2.jpg"></li> 
            <li><img src="img/slide3.jpg"></li> 
            <li><img src="img/slide4.jpg"></li> 
            <li><img src="img/slide5.jpg"></li> 
        </ul>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.roundabout.js"></script> 
    <script type="text/javascript" src="jquery.roundabout-shapes.js"> </SCRIPT>
    <script type="text/javascript"> 
    $(document).ready(function() {
        $('#myroundabout').roundabout({
            autoplay: true,//自动播放
            autoplayDuration: 3000,//时间
            autoplayPauseOnHover: true,//自动鼠标移上停滞
            shape: 'figure8',  //支持属性theJuggler、figure8、waterWheel、square、conveyorBeltLeft、conveyorBeltRight、goodbyeCruelWorld、diagonalRingLeft、diagonalRingRight、rollerCoaster、tearDrop、tickingClock、flurry、nowSlide、risingEssence随便换 
            minOpacity: 1
        });
    });
    </script>    
        
    </body> 
    </html> 
  • 相关阅读:
    php 判断访问是否是手机或者pc
    SQLSTATE[HY000] [2002] No such file or directory
    No input file specified.
    Call to undefined function openssl_decrypt()
    Parse error: syntax error, unexpected 'class' (T_CLASS)
    tp5关联模型进行条件查询
    windows下php7.1安装redis扩展以及redis测试使用全过程
    SourceTree跳过初始设置
    对象数组(JSON) 根据某个共同字段 分组
    SDUT 3377 数据结构实验之查找五:平方之哈希表
  • 原文地址:https://www.cnblogs.com/xinlinux/p/4545347.html
Copyright © 2011-2022 走看看