插件-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 ...
随机推荐
- 成都Uber优步司机奖励政策（4月11日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 帮你理解学习lambda式
概要 窗前明月光,疑是地上霜,举头望明月,低头思故乡.别误会这是开头诗与以下文章没任何关系. 今天我想给大家说道说道 C# lambda表达式,不废话,下面开始说道! lambda lambd ...
- LUIS 语义识别API调用方法
本例使用itchat获取微信文字消息,发送给LUIS返回识别消息,再将返回消息格式化后通过微信发回 关于itchat的使用参考我的另外一篇随笔itchat个人练习 语音与文本图灵测试例程 # -*- ...
- python练习---小脚本
一.爬子域名 #!/usr/bin/python # -*- coding: utf-8 -*- import requests import re import sys def get(domain ...
- 微信小程序和微信H5测试中易出Bug的点和注意事项
一.微信小程序 易出Bug的点: 小程序的分享转发功能 背景:小程序项目开发基本完毕也都已经测过几轮,功能上基本没有什么问题,但是上线后却被客户发现通过分享转发小程序给别人,别人无法正常打开的情况 原 ...
- VR电竞游戏在英特尔®架构上的用户体验优化
作为人与虚拟世界之间的新型交互方式,VR 能够让用户在模拟现实中获得身临其境的感受.但是,鉴于 VR 的帧预算为每帧 11.1ms (90fps),实现实时渲染并不容易,需要对整个场景渲染两次(一只眼 ...
- Liunx expect 基础
a script for study except #!/usr/bin/expect 声明文件内的语法使用 expect 的语法来执行. send send: 向进程发送字符串,用于模拟用户的输入. ...
- Debian 给非 ROOT 用户添加 sudoer 权限
问题描述 从官方镜像安装的 Debian 9 (Stretch)比较纯净,但因此需要自己安装.配置许多常用的 Linux 应用,这里就需要 sudo (super user do)临时获取 root ...
- nordic-mesh中应用的代码实现
nordic-mesh中应用的代码实现 Nordic-Mesh遵循SIG-Mesh-Profile中的mesh定义,实现了element.model等概念. 一个应用中包含一个或多个element,e ...
- Twitter推广消息可使品牌线下销售额增长三成
新浪科技讯 北京时间8月9日上午消息,Twitter周四宣布,该公司的推广消息(Promoted Tweet)可以让品牌的线下销售增长29%. 此外,Twitter当天还推出了一个新项目,让品牌可以追 ...