插件-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 ...
随机推荐
- window + office 激活方法（不提供下载）
下载KMSTools工具,里面集成了许多激活方法. WINDOWS KMS激活方式 比较简单,随便点一个KMSTools带有KMS字样的工具就可以了,但是KMS激活方式有效期为180天,到期需要继续激 ...
- 求两个字符串的最长公共子串——Java实现
要求:求两个字符串的最长公共子串,如“abcdefg”和“adefgwgeweg”的最长公共子串为“defg”(子串必须是连续的) public class Main03{ // 求解两个字符号的最长 ...
- SteamVR Unity Plugin - v2.0.1中的InteractionSystem
最近写VR项目的时候用到了SteamVR Unity Plugin - v2.0.1插件,感觉比之前用到的SteamVR plugin for Unity - v1.2.2版本改进了很多,就算不用VR ...
- Unity Lighting - Emissive Materials 自发光材质（九）
Emissive Materials 自发光材质 Whilst Area Lights are not supported by Precomputed Realtime GI, similar ...
- 【Shell 开发】Shell 目录
目录 [第一章]Shell 概述 [第二章]Shell 变量 [第三章]Shell 变量的数值计算 [第四章]Shell 条件测试表达式 [shell 练习1]编写Shell条件句练习 [shell ...
- loadrunner socket协议问题归纳（5）
获取服务器的返回值,可以用web_reg_save_param函数,该参数最好放到: 语法: int web_reg_save_param(const char *ParamName, <lis ...
- Friends and Cookies(思维)
Abood's birthday has come, and his n friends are aligned in a single line from 1 to n, waiting for t ...
- Scrum立会报告+燃尽图（十月二十二日总第十三次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 项目地址:https://git.coding.net/zhang ...
- Thunder团队第七周 - Scrum会议4
Scrum会议4 小组名称:Thunder 项目名称:i阅app Scrum Master:翟宇豪 工作照片: 宋雨在照相,所以不在相片中. 参会成员: 王航:http://www.cnblogs.c ...
- Java 学习笔记 ------第二章 从JDK到IDE
本章学习目标: 了解与设定PATH 了解与指定CLASSPATH 了解与指定SOURCEPATH 使用package与import管理类别 初步认识JDK与IDE的对应关系 一.第一个Java程序 工 ...