插件-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 ...
随机推荐
- mfc通过MapWinGIS控件读取shp文件（不通过#import实现）
1.首先注册MapWinGIS ActiveX组件, 引入MapWinGIS.ocx产生的MapWinGIS_i.h和MapWinGIS_i.c文件,利用CoCreateInstance函数来调用 演 ...
- MySql访客连接设置
步骤: 1 . 打开命令窗口,切换到mysql安装目录 可以在控制台目录切换,也可以打开所在安装目录后再打开控制台 2 . 执行命令:mysql -u root -p 3 . 无法访问的话,查看防火墙 ...
- 安装centos minimal 版本后安装mysql详细过程（linux）
本文内容参考自:http://www.centoscn.com/mysql/2014/1211/4290.html PS:Yum(全称为 Yellow dog Updater, Modified)是一 ...
- 记录阿里云ECS(Centos7.4)安装mysql 8.0.X服务
#*.rpm介绍 大多数二进制rpm包都包含在名称中倒数第二个字段中编译rpm的体系结构..rpm软件包有那么几种 *.src.rpm 源程序包,要先通过编译才能安装 *.noarch.rpm 该包适 ...
- python练习---小脚本
一.爬子域名 #!/usr/bin/python # -*- coding: utf-8 -*- import requests import re import sys def get(domain ...
- chrome json 格式化插件 JSON-Handle
Chrome 浏览器插件安装方法: 在地址栏输入 , 将下载的 .crx 插件包拖放到打开的页面中. JSON-Handle It's a browser and editor for JSON d ...
- Oracle数据库及图形化界面安装教程详解
百度云盘oracle数据库及图形化界面安装包 链接: https://pan.baidu.com/s/1DHfui-D2n1R6_ND3wDziQw 密码: f934 首先在电脑D盘(或者其他不是C盘 ...
- PLSQL事务
1 使用set transaction设置事务属性 2 只读事务 set transaction read only 3 读写事务 set transaction write; 4 在进行数据统计分析 ...
- [寒假学习笔记]（一）Markdown语法学习
Markdown 学习 在博客园上使用markdown编辑,记录学习进度,以来日可以复习 前期准备 1. 安装markdownpad2 官网直接找下载安装,遇到bug他会自动提示信息,跟着提示去安装一 ...
- 深度学习论文笔记：Deep Residual Networks with Dynamically Weighted Wavelet Coefficients for Fault Diagnosis of Planetary Gearboxes
这篇文章将深度学习算法应用于机械故障诊断,采用了“小波包分解+深度残差网络(ResNet)”的思路,将机械振动信号按照故障类型进行分类. 文章的核心创新点:复杂旋转机械系统的振动信号包含着很多不同频率 ...