  <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://os.alipayobjects.com/rmsportal/cfYsvciteYQGywxceeGI.css" />
  <style id="stylesheet">
   html,body{
    width: 100%;
    height: 100%;
   }
   .slide3D img{
    width: 100%;
   }
   .container3D{
    background: #eee;
    margin:10px;
    float:left;
   }
   .title{
    padding:10px;
    color:#fff;
    font-size:18px;
   }
  </style>
 </head>
 <body>
  <div id="content">
   <div class="title">轮播图</div>
   <div class="container3D slide">
    <div class="wrapper3D">
     <div class="slide3D">
      <img src="https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg" alt="" />
     </div>
     <div class="slide3D">
      <img src="https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg" alt="" />
     </div>
     <div class="slide3D">
      <img src="https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg" alt="" />
     </div>
     <div class="slide3D">
      <img src="https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg" alt="" />
     </div>
     <div class="slide3D">
      <img src="https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg" alt="" />
     </div>
    </div>
    <div class="slide3D-pagination"></div>
    <div class="slide3D-prev-button"></div>
    <div class="slide3D-next-button"></div>
   </div>
   <div class="container3D flip">
    <div class="wrapper3D">
     
    </div>
    <div class="slide3D-pagination"></div>
    <div class="slide3D-prev-button"></div>
    <div class="slide3D-next-button"></div>
   </div>
   <div class="container3D turn">
    <div class="wrapper3D">
     
    </div>
    <div class="slide3D-pagination"></div>
    <div class="slide3D-prev-button"></div>
    <div class="slide3D-next-button"></div>
   </div>
   <div class="container3D flat">
    <div class="wrapper3D">
     
    </div>
    <div class="slide3D-pagination"></div>
    <div class="slide3D-prev-button"></div>
    <div class="slide3D-next-button"></div>
   </div>
   <div class="container3D fragment">
    <div class="wrapper3D">
     
    </div>
    <div class="slide3D-pagination"></div>
    <div class="slide3D-prev-button"></div>
    <div class="slide3D-next-button"></div>
   </div>
  </div>
  <script src="https://os.alipayobjects.com/rmsportal/RnYtVBKOUzXXOiZIqFtF.js"></script>
  <script id="scripts">
      var width = 400;
      var height = 178;
   var mySlide = new Slide3D('.slide', {
    width: width,
    height:height,
    effect: 'slide',
    paginationClickable: true,
    pagination: true,  // 是否添加分页器
    loop:true,  //是否循环,除“slide”外,其他动画默认循环
    autoplay: 2000,
    autoplayDisableOnInteraction : false
   });
   var mySlide2 = new Slide3D('.flip', {
    width: width,
    height:height,
    effect: 'flip',  // flip | turn | slide | flat | fragment
    sources: ['https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
    box:{
     rows: 6,  // 切割行
     cols: 3  // 切割列
    },
    pagination: true,  // 是否添加分页器
    paginationClickable: true,
    autoplay: 2000,
    autoplayDisableOnInteraction : false
   });
   var mySlide3 = new Slide3D('.turn', {
    width: width,
    height:height,
    effect: 'turn',  // flip | turn | slide | flat | fragment
    sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
    box:{
     rows: 6,  // 切割行
     cols: 3  // 切割列
    },
    pagination: true,  // 是否添加分页器
    paginationClickable: true,
    autoplay: 2000
//    autoplayDisableOnInteraction : false
   });
   var mySlide4 = new Slide3D('.flat', {
    width: width,
    height:height,
    effect: 'flat',  // flip | turn | slide | flat | fragment
    sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
    box:{
     rows: 6,  // 切割行
     cols: 10  // 切割列
    },
    pagination: true,  // 是否添加分页器
    paginationClickable: true,
    autoplay: 2000,
    autoplayDisableOnInteraction : false
   });
   var mySlide5 = new Slide3D('.fragment', {
    width: width,
    height:height,
    effect: 'fragment',  // flip | turn | slide | flat | fragment
    sources: ['https://gw.alicdn.com/tfs/TB1jeiqRFXXXXcLXVXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1gY9yRFXXXXXJXVXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1LW5eRFXXXXcNaXXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1ADKERFXXXXX2XFXXXXXXXXXX-700-306.jpg',
    'https://gw.alicdn.com/tfs/TB1O3t.RFXXXXXCaFXXXXXXXXXX-700-306.jpg'],
    box:{
     rows: 6,  // 切割行
     cols: 3  // 切割列
    },
    pagination: true,  // 是否添加分页器
    paginationClickable: true,
    autoplay: 2000,
    autoplayDisableOnInteraction : false
   });
  </script>
 </body>
</html>

5种banner的更多相关文章

  1. JQuery——banner旋转木马效果

    博主在浏览网页时无意间发现了一种banner图的轮播方式--像旋转木马一样的轮播方式,博主感觉非常新颖独特,经过查阅资料,观看某课网教程总算搞了出来的,其原理主要利用了JQuery代码实现,好了不多说 ...

  2. Cisco banner 登陆消息提示设置命令详解

    从法律角度来看,登陆消息非常重要.当入侵者进入网络而没有受到适当的警告时,他们有可能赢得官司.在放置登陆消息之前应让律师检查下,永远不要使用"欢迎"等问候语,以免被误解为邀请大家使 ...

  3. 一种让超大banner图片不拉伸、全屏宽、居中显示的方法

    现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...

  4. [转]一种让超大banner图片不拉伸、全屏宽、居中显示的方法

    现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...

  5. 转载 | 一种让超大banner图片不拉伸、全屏宽、居中显示的方法

    现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...

  6. python编写的banner获取代码的两种方式

    1.无选项和帮助信息 #!/usr/bin/env python #coding:utf-8 import socket import sys import os from threading imp ...

  7. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  8. 2D banner

    1.这是我第一次发博客咯!看到本文章后不喜勿喷,有什么需要改进的地方请多多指教! 2.今天和大家分享一下2D banner,代码如下,注释都有.因为本地测试和上传到博客环境不太一样,样式变化比较大,样 ...

  9. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

随机推荐

  1. Java-Runoob:Java 修饰符

    ylbtech-Java-Runoob:Java 修饰符 1.返回顶部 1. Java 修饰符 Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 修饰符用来定义类.方法或者变 ...

  2. web deploy 部署网站

    一.服务端配置 1. 确保在服务器端(我目前是win server 2012 R2)安装管理服务 安装后服务器会重启, 2)安装webdeploy http://www.iis.net/downloa ...

  3. java成神之——集合框架之Array

    Array 初始化 填充元素的几种方式 数组转流 遍历 数组转成字符串 排序 查找 数组扩大 原始类型数组和包装类型数组转换 移除元素 比较数组是否相等 克隆 类型转换 过滤元素 结语 Array 初 ...

  4. DPtoLP/LPtoDP 和 ScreenToClient/ClientToScreen

    设备坐标(Device Coordinate)又称为物理坐标(Physical Coordinate),是指输出设备上的坐标.通常将屏幕上的设备坐标称为屏幕坐标.设备坐标用对象距离窗口左上角的水平距离 ...

  5. BeX5 常见问题解决办法

    1.获取当前Activity的名称 Activity activity = ProcessUtils.getActivityInProcessContext(); String activityNam ...

  6. CImage得到位图的大小

    CImage image; image.Load(_T("1.jpg")); //HBITMAP hBitmap=image.Detach(); HGLOBAL m_hMem = ...

  7. Perl 变量:标量变量、数组变量、哈希变量和变量上下文

    一.Perl 变量变量是存储在内存中的数据,创建一个变量即会在内存上开辟一个空间.解释器会根据变量的类型来决定其在内存中的存储空间,因此你可以为变量分配不同的数据类型,如整型.浮点型.字符串等.上一章 ...

  8. Lucene Payload 的研究与应用

    Payload (元数据) 诞生于 Lucene 的2.2 版本,它是在 Lucene 2.1 索引文件格式的基础上扩展而来,提供了一种可以灵活配置的高级索引技术,在某些特定应用场景下能优化基于 Lu ...

  9. 【bzoj1602】[Usaco2008 Oct]牧场行走

    1602: [Usaco2008 Oct]牧场行走 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1793  Solved: 935[Submit][St ...

  10. PHP内核介绍及扩展开发指南—Extensions 的编写

    Extensions 的编写 理解了这些运行机制以后,本章着手介绍Extensions 的编写,但凡写程序的人都知道hello world,那好,就从hello world开始. 1.1Hello W ...