5种banner

 <!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的更多相关文章

JQuery——banner旋转木马效果
博主在浏览网页时无意间发现了一种banner图的轮播方式--像旋转木马一样的轮播方式,博主感觉非常新颖独特,经过查阅资料,观看某课网教程总算搞了出来的,其原理主要利用了JQuery代码实现,好了不多说 ...
Cisco banner 登陆消息提示设置命令详解
从法律角度来看,登陆消息非常重要.当入侵者进入网络而没有受到适当的警告时,他们有可能赢得官司.在放置登陆消息之前应让律师检查下,永远不要使用"欢迎"等问候语,以免被误解为邀请大家使 ...
一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
[转]一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
转载 | 一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
python编写的banner获取代码的两种方式
1.无选项和帮助信息 #!/usr/bin/env python #coding:utf-8 import socket import sys import os from threading imp ...
CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
2D banner
1.这是我第一次发博客咯!看到本文章后不喜勿喷,有什么需要改进的地方请多多指教! 2.今天和大家分享一下2D banner,代码如下,注释都有.因为本地测试和上传到博客环境不太一样,样式变化比较大,样 ...
Banner中利用Jquery隐藏显示下方DIV块
实现方式1: <!DOCTYPE html><html><head> <meta charset="UTF-8"> &l ...

随机推荐

PTA 畅通工程之最低成本建设问题（30 分）（最小生成树 krusal)
畅通工程之最低成本建设问题(30 分) 某地区经过对城镇交通状况的调查,得到现有城镇间快速道路的统计数据,并提出“畅通工程”的目标:使整个地区任何两个城镇间都可以实现快速交通(但不一定有直接的快速道路 ...
Oracle常见的表连接的方法
1 排序合并连接SMJ Sort merge join 排序合并总结: 1 通常情况下,排序合并连接的效率远不如hash join,前者适用范围更广,hj只使用于等值连接,smj范围更广(<,& ...
Lagom production deployment
tutorial:https://developer.lightbend.com/guides/lagom-kubernetes-k8s-deploy-microservices/ 一.harbor ...
Python多线程-守护线程
守护线程:守护着非守护线程,守护线程和非守护线程同时运行,当非守护线程运行结束后,无论守护线程有没有运行完,脚本都会停止运行首先看一段普通的多线程实例 # -*- coding:utf-8 -*- ...
http响应chunked格式分析
有的时候服务器生成HTTP回应是无法确定信息大小的,这时用Content-Length就无法事先写入长度,而需要实时生成消息长度,这时服务器一般采用Chunked编码. 在进行Chunked编码传输时 ...
mssql server修改数据库文件位置此种方法暂未测试成功
--查看当前的存放位置 select database_id,name,physical_name AS CurrentLocation,state_desc,size from sys.master ...
leetcode606
/** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...
peerconnection_client分析笔记
Windows版本的peerconnection_client demo是一个win32程序,入口函数为main.cc里面的wWinMain,程序整体流程就从这个入口函数下手开始分析. 1.peer ...
CentOS-6.4 编译安装ffmpeg加x264以及rtmp
CentOS 6.4-64位下编译ffmpeg几个简单步骤: 1.编译前环境准备: 2.下载源码: 3.编译,安装: ----------------------------------------- ...
Money Systems 货币系统（母函数）
Description 母牛们不但创建了他们自己的政府而且选择了建立了自己的货币系统. [In their own rebellious way],,他们对货币的数值感到好奇. 传统地,一个货币系统是 ...

5种banner

5种banner的更多相关文章

随机推荐

热门专题