<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://os.alipayobjects.com/rmsportal/cfysvciteyqgywxceegi.css?1.1.11" />
<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?1.1.11"></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>
系统特点：功能简洁实用。目前互联网上最简洁的企业网站建设系统！原创程序代码。非网络一般下载后修改的代码。更安全。速度快！界面模版分离。原创的分离思路，完全不同于其他方式，不一样的简单感受！搜索引擎优化。做了基础的seo优化。对搜索引擎更友好系统功能关于我们：介绍企业介绍类信息，可自由添加多个介绍栏目！资讯中心：公司或行业资讯类内容展示。可自由添加多个资讯内容！产品展示：支持类别设置，可添加产品图片
0
以上就是5种关于banner图的实例代码的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
878
收藏
