插件-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 ...
随机推荐
- Servlet——web.xml的配置
<servlet>: <servlet-name>: 名称 <servlet-class>: 类名 <init-param>: 初始化参数(只有本ser ...
- MySQL优化Explain命令简介(一)
最近碰到MySQL需要写入大量数据并查询的场景,于是学习了一下MySQL的查询优化,想找关于explain命令的详细资料,然而网上并没有找全,最后终于在<高性能MySQL>中找到了对这一命 ...
- day 3 私有属性，私有方法，__del__
1.隐藏对象的属性 如果有一个对象,当需要对其进行修改属性时,有2种方法 对象名.属性名 = 数据 ---->直接修改 对象名.方法名() ---->间接修改 1)版本1:直接修改 对象的 ...
- charles基本使用文档
Charles 主要的功能包括: 截取 Http 和 Https 网络封包. 支持重发网络请求,方便后端调试. 支持修改网络请求参数. 支持网络请求的截获并动态修改. 支持模拟慢速网络. Charle ...
- 跟浩哥学自动化测试Selenium -- Selenium简介 (1)
Selenium 简介 Selenium 是一款开源的web自动化测试工具,用来模拟对浏览器的操作(主要是对页面元素的操作),简单来讲,其实就是一个jar包.Selenium早期的版本比如1.0市场占 ...
- POJ 3278 Catch That Cow (附有Ｒuntime Error和Wrong Answer的常见原因）
题目链接:http://poj.org/problem?id=3278 Catch That Cow Time Limit: 2000MS Memory Limit: 65536K Total S ...
- Eclipse用java.util.Scanner时出现Resource leak: 'in' is never closed
Resource leak: 'in' is never closed : 直译为资源泄漏,‘in’一直没被关闭. 由于声明了数据输入扫描仪(Scanner in),从而获得了配置内存,但是结束时却没 ...
- mac安装pkg 一直“正在验证” 卡着
今天换了新mac, 但是之前wireshark(抓包工具) 不能用了 ,要安装Xquartz. 下载之后一直卡着, 网上找了半天没有解决方法. 最后我重启一下就好了... 重启一下. 2. 15款ma ...
- Oracle集合
--union 并集 select * from emp where ename like '%A%' union select * from emp where ename like '%M%'; ...
- gevent协程、select IO多路复用、socketserver模块 改造多用户FTP程序例子
原多线程版FTP程序:http://www.cnblogs.com/linzetong/p/8290378.html 只需要在原来的代码基础上稍作修改: 一.gevent协程版本 1. 导入geven ...