插件-3D轮播图
先上效果图
查看实例点击 这里
这个栗子中，可以选择展示 5 张 或者展示 3 张，即使是只有一个slide，也可以完成布局，正常轮播，麻麻再也不用怕只有4个slid而不能用这种轮播啦！
本栗实现原理是使用CSS3的 transition 属性 ，在轮播的时候只需要给slide 赋予对应的位置，slide 就能够通从上一位置运动到下一位置。
配置：
var swiper_3D = new Swiper3D ({
'slideContainer':'.swiper3D', // 必填
'slideWarpper':'.swiper-wrapper', // 必填
'slide':'.swiper-slide', // 必填
'leftBtn':'.swiper3D-leftbtn', // 左按钮
'rightBtn':'.swiper3D-rightbtn', // 右按钮
'activeIndex':0, //初始化展示的第几个 slide
'viewType': 5, // 3 展示 3张 ，5 展示 5张
'durTime':200, // 切换过场时间，选填，默认400
'autoPlay':true, //是否自动播放 false 不自动播放， true 自动播放 ，默认false
'autoTime':3000 //自动播放事件 选填， 默认 4000，且只在自动播放开启时有效
});
如果需要能够通过手指活鼠标滑动 触发切换的话 ，可以引入 touch 插件，进行如下配置:
在我前面的一篇文章中有介绍到它的源码及用法，详情点击这里 。
new TouchTool({
'obj': document.getElementById('swiper3D'),
'direction': 'horizontal', //horizontal vertical水平垂直
'slideLeft': function() {
swiper_3D.slideRight()
},
'slideRight': function() {
swiper_3D.slideLeft()
}
})
swiper_3D 代码如下：
HTML ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper3D.css"/>
</head>
<body>
<div class="swiper-container swiper3D" id="swiper3D">
<div class="swiper-wrapper">
<div class="swiper-slide"> slide1 </div>
<div class="swiper-slide"> slide2 </div>
<div class="swiper-slide"> slide3 </div>
<div class="swiper-slide"> slide4 </div>
<div class="swiper-slide"> slide5 </div>
<div class="swiper-slide"> slide6 </div>
<div class="swiper-slide"> slide7 </div>
</div>
<div class="swiper3D-leftbtn"> < </div>
<div class="swiper3D-rightbtn"> > </div>
</div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/swiper3D.js"></script>
<script type="text/javascript">
var swiper_3D = new Swiper3D ({
'slideContainer':'.swiper3D',
'slideWarpper':'.swiper-wrapper',
'slide':'.swiper-slide',
'leftBtn':'.swiper3D-leftbtn',
'rightBtn':'.swiper3D-rightbtn',
'activeIndex':0,
'viewType': 5,
'durTime':200,
'autoPlay':true,
'autoTime':3000
});
new TouchTool({
'obj': document.getElementById('swiper3D'),
'direction': 'horizontal', //horizontal vertical水平垂直
'slideLeft': function() {
swiper_3D.slideRight()
},
'slideRight': function() {
swiper_3D.slideLeft()
}
}) </script>
</body>
</html>
CSS：
.swiper3D{
position: relative;
width: 100%;height: 400px;
max-width: 640px;
margin: 0 auto;
background-color:#ccc ;
color: #fff;
}
.swiper3D .swiper-wrapper{
position: absolute;
left:;top:;
width: 100%;height: 100%;
z-index:;
}
.swiper3D .swiper-slide{
position: absolute;
left: 50%;top:;
width: 50%;height:100%;
margin-left: -25%;
font-size: 40px;
transition: all .4s linear;
-webkit-transition: all .4s linear;
cursor: pointer;
/*下面设置文字居中，可以去掉*/
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/*====没用代码，可以去掉====*/
.swiper-wrapper div:nth-of-type(1){background-color: #B41B1B;}
.swiper-wrapper div:nth-of-type(2){background-color: #C9CA2D;}
.swiper-wrapper div:nth-of-type(3){background-color: #92CA2D;}
.swiper-wrapper div:nth-of-type(4){background-color: #30CA2D;}
.swiper-wrapper div:nth-of-type(5){background-color: #2DCAA7;}
.swiper-wrapper div:nth-of-type(6){background-color: #2DA7CA;}
.swiper-wrapper div:nth-of-type(7){background-color: #2D4FCA;}
.swiper-wrapper div:nth-of-type(8){background-color: #732DCA;}
.swiper-wrapper div:nth-of-type(9){background-color: #B92DCA;}
.swiper-wrapper div:nth-of-type(10){background-color: #CA2D73;}
/*====没用代码，可以去掉====*/
.swiper3D-leftbtn,
.swiper3D-rightbtn{
position: absolute;
top: 50%;
margin-top: -40px;
width: 40px;height: 80px;
background-color: #25A27C;
font-size: 30px;
font-weight: bold;
line-height: 80px;
text-align: center;
cursor: pointer;
z-index:;
}
.swiper3D-leftbtn{left: 20px;}
.swiper3D-rightbtn{right: 20px;}
/*导航*/
.navbox{
width: 100%;
text-align: center;
margin-top: 20px;
}
.navbox span{
display: inline-block;
width: 30px;height: 30px;
margin: 5px;
border-radius: 100%;
background-color: #00C81B;
opacity: .7;
cursor: pointer;
}
.navbox span.active{
opacity:;
}
/*
*在这里 调整每一个的位置
*/
/*从左往右 第一个*/
.swiper3D .left{
opacity: .5;
transform: translateX(-30%) scale3d(.6,.6,.6) ;
-webkit-transform: translateX(-30%) scale3d(.6,.6,.6) ;
-webkit-transform-origin: left center;
transform-origin: left center;
z-index:;
}
/*从左往右 第二个*/
.swiper3D .left-harf{
opacity: .8;
transform: translateX(-15%) scale3d(.8,.8,.8) ;
-webkit-transform: translateX(-15%) scale3d(.8,.8,.8) ;
-webkit-transform-origin: left center;
transform-origin: left center;
z-index:;
}
/*从左往右 第三个*/
.swiper3D .front{
opacity:;
transform: translateX(0) scale3d(1,1,1) ;
-webkit-transform: translateX(0) scale3d(1,1,1) ;
z-index:;
}
/*从左往右 第四个*/
.swiper3D .right-harf{
opacity: .8;
transform: translateX(15%) scale3d(.8,.8,.8) ;
-webkit-transform: translateX(15%) scale3d(.8,.8,.8) ;
-webkit-transform-origin: right center;
transform-origin: right center;
z-index:;
}
/*从左往右 第五个*/
.swiper3D .right{
opacity: .5;
transform: translateX(30%) scale3d(.6,.6,.6) ;
-webkit-transform: translateX(30%) scale3d(.6,.6,.6) ;
-webkit-transform-origin: right center;
transform-origin: right center;
z-index:;
}
/*5个能看到的以外的 slide 放在最后面*/
.swiper3D .back{
opacity:;
transform: translateX(0) scale3d(.5,.5,.5) ;
-webkit-transform: translateX(0) scale3d(.5,.5,.5) ;
z-index:;
}
JS ：
function Swiper3D (param){
if(! 'transition' in document.documentElement.style && ! '-webkit-transition' in document.documentElement.style) return console.log('Not Support Css3')
var self = this;
this.slideContainer = $(param.slideContainer);
this.slideWarpper = $(param.slideWarpper);
this.slide = this.slideWarpper.find( param.slide ) ;
this.leftBtn = $(param.leftBtn);
this.rightBtn = $(param.rightBtn);
this.autoPlay = param.autoPlay || false;
this.autoTime = param.autoTime || 4000 ;
this.durTime = param.durTime || 300;
this.active = param .activeIndex || 0;
this.left = this.left_href = this.right_href = this.right = 0;
this.isMoving = false;
this.interval = null;
this.viewType = param.viewType || 5;
if(this.slide.length < this.viewType){var i = Math.ceil( this.viewType/this.slide.length)-1;for (var j = 0 ; j < i;j++) {self.slide.each(function (){var _this = $(this).clone(true);self.slide.parent().append(_this);})}}
this.slide = this.slideWarpper.find( param.slide )
this.length = this.slide.length;
this.sortIndex = function( active ){
this.left_harf = active-1;
this.active = active ;
this.right_harf = active + 1;
if(this.left_harf < 0) this.left_harf = this.length + this.left_harf;
if(this.right_harf > this.length - 1) this.right_harf = this.right_harf - this.length;
this.left = active-2;
this.right = active + 2;
if(this.left < 0) this.left = this.length + this.left;
if(this.right > this.length - 1 ) this.right = this.right - this.length;
}
this.move = function (fix){
this.isMoving = true;
this.sortIndex( fix );
this.slide.eq(this.left_harf).removeClass( 'left front right right-harf back').addClass('left-harf');
this.slide.eq(this.active).removeClass( 'left-harf left right right-harf back ').addClass('front');
this.slide.eq(this.right_harf).removeClass( 'left left-harf front right back').addClass('right-harf');
if(this.viewType === 5){
this.slide.eq(this.left).removeClass( 'left-harf front right right-harf back').addClass('left');
this.slide.eq(this.right).removeClass( 'left left-harf front right-harf back').addClass('right');
for (var i=0;i<this.length;i++) {
if(i != this.left && i != this.left_harf && i != this.right_harf && i != this.right && i != this.active){
this.slide.eq(i).removeClass( 'left left-harf front right-harf right').addClass('back');
}
}
}else{
for (var i=0;i<this.length;i++) {
if( i != this.left_harf && i != this.right_harf && i != this.active){
this.slide.eq(i).removeClass( 'left-harf front right-harf').addClass('back');
}
}
}
setTimeout(function (){
self.isMoving = false
}, self.durTime )
}
this.slideLeft = function (){
if( self.isMoving ) return ;
clearInterval(self.interval);
self.active -- ;
if( self.active < 0 ) self.active = self.length - 1;
self.move( self.active );
}
this.slideRight = function (){
if( self.isMoving ) return ;
clearInterval(self.interval);
self.active ++ ;
if( self.active > self.length - 1 ) self.active = 0;
self.move( self.active );
}
this._autoPlay = function (){
if(! this.autoPlay) return false ;
this.interval = setInterval(function (){
self.active++;
if( self.active > self.length - 1 ) self.active = 0;
self.move( self.active );
}, self.autoTime )
}
this.initBtn = function (){
if(this.leftBtn.length !== 0)
this.leftBtn.on( 'click' , self.slideLeft );
if(this.rightBtn.length !== 0)
this.rightBtn.on( 'click' , self.slideRight );
}
this.slide.on('click',function (){
var _index = $(this).index();
if(_index == self.active || self.isMoving) return;
clearInterval(self.interval);
self.active = _index ;
self.move(self.active);
self._autoPlay();
});
this.init = function (){
this.sortIndex( this.active );
this.move(this.active);
this.initBtn();
this._autoPlay();
}
this.init();
}
/*
USE：
var swiper_3D = new Swiper3D ({
'slideContainer':'.swiper3D', // 必填
'slideWarpper':'.swiper-wrapper', // 必填
'slide':'.swiper-slide', // 必填
'leftBtn':'.swiper3D-leftbtn', // 左按钮
'rightBtn':'.swiper3D-rightbtn', // 右按钮
'activeIndex':0, //初始化展示的第几个 slide
'viewType': 5, // 3 展示 3张 ，5 展示 5张
'durTime':200, // 切换过场时间，选填，默认400
'autoPlay':true, //是否自动播放 false 不自动播放， true 自动播放 ，默认false
'autoTime':3000 //自动播放事件 选填， 默认 4000，且只在自动播放开启时有效
});
示例：
var swiper_3D = new Swiper3D ({
'slideContainer':'.swiper3D', // 必填
'slideWarpper':'.swiper-wrapper', // 必填
'slide':'.swiper-slide', // 必填
'rightBtn':'.swiper3D-rightbtn', // 右按钮
'activeIndex':0, //初始化展示的第几个 slide 默认 0
'viewType': 5, // 3 展示 3张 ，5 展示 5张 ,默认 5
});
*/
（完）
插件-3D轮播图的更多相关文章
- CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
- 3d轮播图——类似酷狗的轮播
说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...
- 小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- Bootstrap插件-carousel(轮播图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- layui常用插件(一) 轮播图
轮播图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ht ...
- 微信小程序3D轮播图
<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...
随机推荐
- windows phone 8.1 让项目开启蓝牙genericAttributeProfile
1.打开项目里面的 Package.appxmanifest 文件 找到<Capabilities>节点,添加代码如下,其中 serviceId:6006 可以自己修改值 <m2: ...
- ARKit-1
1.1-AR技术简介 增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像.视频.3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在 ...
- js的视频和音频采集
js的视频和音频采集 今天要写的,不是大家平时会用到的东西.因为兼容性实在不行,只是为了说明下前端原来还能干这些事. 大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来,再为所欲为的么.或者说 ...
- 17、JAVA多线程和并发基础面试问答
JAVA多线程和并发基础面试问答 原文链接:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-ans ...
- Yii 2.0 使用片段缓存
网站首页footer中的菜单标题是从数据库读取并显示处理的. 也就是 <footer>标题里面是foreach.这样每个人打开网站就查询遍历效率会很低. <footer class= ...
- Yii 2.0 中事件的使用
关于PHP的事件处理,参照 http://www.cnblogs.com/mafeifan/p/4322238.html http://www.cnblogs.com/mafeifan/p/43222 ...
- Egret入门(三)--创建HelloWorld项目(4.0-使用Egret Wing)
准备 编辑器: Egret Wing3(4.0.3) 需要下载安装 语言: TepyScript(JS的超集,参考手册http://bbs.egret.com/thread-1441-1-1.html ...
- NO--10今天带大家回忆回忆“闭包”吧！
对于‘闭包,我相信很多人都掉进过这个坑里,也相信很多人没能详细的理解这个问题,今天带大家再次走进闭包: 写这篇文章时的心情是十分忐忑的,因为对于我们今天的主角:闭包,很多小伙伴都写过关于它的文章,相信 ...
- Python基础灬补充（循环、格式化输出）
for循环&格式化输出 chinese_zodiac = '鼠牛虎兔龙蛇马羊猴鸡狗猪' for year in range(2000, 2013): print("%s年的生肖是:% ...
- jquery新版本旧版本之间的坑
JQuery自1.6.1版本开始增加一些属性,使用时尽量使用这些新的属性,例如:selected.checked.在高版本中赋值时最好用prop,如果用attr就会出现赋值不成功的问题, 一般自定义属 ...