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 ...
随机推荐
- Java-Runoob：Java 修饰符
ylbtech-Java-Runoob:Java 修饰符 1.返回顶部 1. Java 修饰符 Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 修饰符用来定义类.方法或者变 ...
- web deploy 部署网站
一.服务端配置 1. 确保在服务器端(我目前是win server 2012 R2)安装管理服务 安装后服务器会重启, 2)安装webdeploy http://www.iis.net/downloa ...
- java成神之——集合框架之Array
Array 初始化 填充元素的几种方式 数组转流 遍历 数组转成字符串 排序 查找 数组扩大 原始类型数组和包装类型数组转换 移除元素 比较数组是否相等 克隆 类型转换 过滤元素 结语 Array 初 ...
- DPtoLP/LPtoDP 和 ScreenToClient/ClientToScreen
设备坐标(Device Coordinate)又称为物理坐标(Physical Coordinate),是指输出设备上的坐标.通常将屏幕上的设备坐标称为屏幕坐标.设备坐标用对象距离窗口左上角的水平距离 ...
- BeX5 常见问题解决办法
1.获取当前Activity的名称 Activity activity = ProcessUtils.getActivityInProcessContext(); String activityNam ...
- CImage得到位图的大小
CImage image; image.Load(_T("1.jpg")); //HBITMAP hBitmap=image.Detach(); HGLOBAL m_hMem = ...
- Perl 变量：标量变量、数组变量、哈希变量和变量上下文
一.Perl 变量变量是存储在内存中的数据,创建一个变量即会在内存上开辟一个空间.解释器会根据变量的类型来决定其在内存中的存储空间,因此你可以为变量分配不同的数据类型,如整型.浮点型.字符串等.上一章 ...
- Lucene Payload 的研究与应用
Payload (元数据) 诞生于 Lucene 的2.2 版本,它是在 Lucene 2.1 索引文件格式的基础上扩展而来,提供了一种可以灵活配置的高级索引技术,在某些特定应用场景下能优化基于 Lu ...
- 【bzoj1602】[Usaco2008 Oct]牧场行走
1602: [Usaco2008 Oct]牧场行走 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1793 Solved: 935[Submit][St ...
- PHP内核介绍及扩展开发指南—Extensions 的编写
Extensions 的编写 理解了这些运行机制以后,本章着手介绍Extensions 的编写,但凡写程序的人都知道hello world,那好,就从hello world开始. 1.1Hello W ...