55555789   发表于 2017-11-16 15:43:52

收藏 375 0

源码:五种炫酷的3D轮播Banner图

源码:五种炫酷的3D轮播Banner图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="O网页链接" />
<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="O网页链接" alt="" />
</div>
<div class="slide3D">
<img src="O网页链接" alt="" />
</div>
<div class="slide3D">
<img src="O网页链接" alt="" />
</div>
<div class="slide3D">
<img src="O网页链接" alt="" />
</div>
<div class="slide3D">
<img src="O网页链接" 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>
<s cript src="O网页链接"></s cript>
<s cript id="s cripts">
   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: ['O网页链接
'O网页链接
'O网页链接
'O网页链接
'O网页链接],
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: ['O网页链接
'O网页链接
'O网页链接
'O网页链接
'O网页链接],
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: ['O网页链接
'O网页链接
'O网页链接
'O网页链接
'O网页链接],
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: ['O网页链接
'O网页链接
'O网页链接
'O网页链接
'O网页链接],
box:{
rows: 6,  // 切割行
cols: 3  // 切割列
},
pagination: true,  // 是否添加分页器
paginationClickable: true,
autoplay: 2000,
autoplayDisableOnInteraction : false
});
</s cript>
</body>
</html>

求转载:  更多交流加群498854752

c


全部回复共0条
电梯直达
我要回复
加载中...
关闭
关闭
在线
咨询
QQ
交流群
App
下载
返回
顶部