3d轮播图(另一种方式,可以实现的功能更为强大也更为灵活,简单一句话,比酷狗优酷的炫)
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写。
这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animate来写的话(酷狗那轮播样式6个其实还好),如果很多的话呢?会怎样,是不是得写一大坨?这显然不是我们想要的,那怎么办呢?其实既然是样式嘛,那我们就可以封成一个css类,一个类名,我们动态的把这些类名给添加给对应的位置即可,代码简单很多。先上一个gif吧。
单纯的不用js的h5+css3也是可以有很强大的动画效果,不过单纯的h5+c3缺少行为交互层,还是比较推荐用js,代码也比较少!
这个gif不会弄。随便弄了个(不好看这不是重点)。
咱先来对比下封成类名和一个个样式来设置两者的优劣:
之前遍历样式的代码是这样的:
设置成类名后的遍历是这样的:
如果js的样式有很多种,不仅仅是上面6种的话,你会发现这些样式跟你看一串json数据没区别了,你会很累(当然这仅仅是夸张说法),代码也是一大坨,嗯对,就是一大坨,你能忍么?反正我不能忍。js的函数式编程一直与优雅不沾边,当然后续的ES6和ES7,特别是模块化思想的引入,其实整体上好很多了,以后我们也是可以优雅而又严谨的写代码= =
同样的还是上一下demo吧:
html+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名师风采</title>
<link rel="stylesheet" href="css/dc-carousel.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var $dc_img=$('.dc_carousel_img li');
var $dc_point=$('.dc_carousel_point li');
var $dc_left=$('.previous');
var $dc_right=$('.next');
var nowTime=0,index=0,my;
function dc_list(i){
$dc_point.eq(i).addClass("current_point").siblings().removeClass('current_point');
} var dc_class=[];
//动态修正class
function slide(flag){
$dc_img.each(function(i){
dc_class[i]=$(this).attr("class");
});
console.log(dc_class);
$dc_img.each(function(i){
console.log($(this).attr("class"));
if(flag){
var a=i+1;
a%=$dc_img.length;
}
else{
var a=i-1;
a<0?a=$dc_img.length-1:a;
}
$(this).css("transition","").removeClass();
if(dc_class[a]!="others"){
// &&dc_class[a-1]!="others"
$(this).css("transition","0.5s");
}
$(this).addClass(dc_class[a]);
})
}
//左右变动函数
function dc_leftImg(){
if(new Date()-nowTime>500){
nowTime=new Date();
index--;
index<0?index=$dc_point.length-1:index;
dc_list(index);
slide(false);
}
}
function dc_rightImg(){
if(new Date()-nowTime>500){
nowTime=new Date();
index++;
index=index%$dc_point.length;
dc_list(index);
slide(true);
}
}
//左右按钮点击函数
$dc_left.click(function(){
dc_leftImg();
autoPlay(false);
});
$dc_right.click(function(){
dc_rightImg();
autoPlay(true);
});
/**
* 自动播放函数
* */
var time;
function autoPlay(flag){
clearInterval(time);
if(flag){
time=setInterval(dc_rightImg,2000);
}
else{
time=setInterval(dc_leftImg,2000);
}
my=autoPlay.arguments[0];
}
autoPlay(true); $dc_img.mouseover(function(){
clearInterval(time);
console.log($(this));
});
$dc_img.mouseout(function(){
autoPlay(my);
}); })
</script>
</head>
<body>
<div class="box">
<div class="dc_carousel" id="dc_carousel">
<div class="dc_carousel_img">
<ul>
<li class="first"><a href="javascript:;"><img src="data:images/teacher1.jpg" alt=""></a></li>
<li class="second"><a href="javascript:;"><img src="data:images/teacher2.jpg" alt=""></a></li>
<li class="third"><a href="javascript:;"><img src="data:images/teacher3.jpg" alt=""></a></li>
<li class="others"><a href="javascript:;"><img src="data:images/teacher4.jpg" alt=""></a></li>
<li class="others"><a href="javascript:;"><img src="data:images/teacher7.jpg" alt=""></a></li>
<li class="others"><a href="javascript:;"><img src="data:images/teacher8.jpg" alt=""></a></li>
<li class="others"><a href="javascript:;"><img src="data:images/teacher9.jpg" alt=""></a></li>
<li class="last_second"><a href="javascript:;"><img src="data:images/teacher5.jpg" alt=""></a></li>
<li class="last"><a href="javascript:;"><img src="data:images/teacher6.jpg" alt=""></a></li>
</ul>
</div>
<div class="dc_carousel_point">
<ul>
<li class="current_point"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<span class="previous dc_left"><img src="data:images/left.png" alt=""></span>
<span class="next dc_right"><img src="data:images/right.png" alt=""></span>
</div>
</div>
</body>
</html>
css
html,body,div,ol,ul,li,p,h1,h2,h3,h4,h5,h6,table,dt,dd,span,input,img{margin:;padding:}ul,li{list-style:none}a{text-decoration:none}.dc_left{float:left}.dc_right{float:right}.dc_clear{content:"";display:block;clear:both}.box{width:800px;height:300px;margin:20px auto 0;box-shadow:0 0 10px #000;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;position:relative}.box .dc_carousel{width:100%;height:100%}.box .dc_carousel .dc_carousel_img{width:100%;height:90%;overflow:hidden;position:relative}.box .dc_carousel .dc_carousel_img ul{width:100%;height:100%;transform-style:preserve-3d;perspective:600px}.box .dc_carousel .dc_carousel_img ul li{width:20%;height:90%;position:absolute;box-shadow:-5px 5px 15px #333;-webkit-box-shadow:-5px 5px 15px #333;-moz-box-shadow:-5px 5px 15px #333;-o-box-shadow:-5px 5px 15px #333;opacity:}.box .dc_carousel .dc_carousel_img ul li img{width:100%;height:100%}.box .dc_carousel .dc_carousel_img ul .others{top:-40%}.box .dc_carousel .dc_carousel_img ul .first{left:40%;opacity:}.box .dc_carousel .dc_carousel_img ul .second{left:60%;transform:rotateY(40deg) scale(.5);opacity:}.box .dc_carousel .dc_carousel_img ul .last{left:20%;transform:rotateY(-40deg) scale(.5);opacity:}.box .dc_carousel .dc_carousel_img ul .third{left:70%;transform:rotateY(50deg) scale(.2);opacity:}.box .dc_carousel .dc_carousel_img ul .last_second{left:10%;transform:rotateY(-50deg) scale(.2);opacity:}.box .dc_carousel .dc_carousel_img ul .dc_change{transform:translate3d(30px, 30px, 30px)}.box .dc_carousel .dc_carousel_point{width:100%;text-align:center;position:absolute;z-index:}.box .dc_carousel .dc_carousel_point li{width:10px;height:10px;list-style:none;border-radius:50%;background:#bbb;display:inline-block}.box .dc_carousel .dc_carousel_point .current_point{background:#3ff}.box .dc_carousel .previous,.box .dc_carousel .next{position:absolute;top:40%;font:30px "Times New Roman";cursor:pointer}.box .dc_carousel .next{left:94%}
跟上一次的原理类似,但这个不同的是用类名来代替并动态修改类名,可拓展性更强,且修改只需修改css样式即可,简单快捷方便,另外一个是图片是可以无限拓展的,不过需要把新加的图片放在中间并加上others类名,很方便吧~~
3d轮播图(另一种方式,可以实现的功能更为强大也更为灵活,简单一句话,比酷狗优酷的炫)的更多相关文章
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 3d轮播图——类似酷狗的轮播
说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
- 微信小程序3D轮播图
<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...
- 插件-3D轮播图
先上效果图 查看实例点击 这里 这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...
- featureCarousel.js 3d轮播图插件
jQuery Feature Carousel 插件是国外的一比较优秀的旋转木马图片插件. 点击这里进入原文. 插件特点: 1.处理div的3d旋转木马效果. 2.支持一个中心,2个侧面的功能 3.中 ...
- 利用css3实现3D轮播图
动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果:css3属性 transform rotate 来实现图片的动画效果 .transition实现过度动画! * { margin ...
随机推荐
- (三十三)UIApplicationDelegate和程序的启动过程
移动操作系统有个致命弱点,是app容易受到干扰(来电或者锁屏). 当app受到干扰时,会产生一系列的系统事件,这时UIApplication会通知其delegate对象,让delegate处理系统事件 ...
- 《java入门第一季》之Character类小案例
/* * Character 类在对象中包装一个基本类型 char 的值 * 此外,该类提供了几种方法,以确定字符的类别小写字母,数字,等等,并将字符从大写转换成小写,反之亦然 * */ 下面通 ...
- LDA和PCA
LDA: LDA的全称是Linear Discriminant Analysis(线性判别分析),是一种supervised learning.有些资料上也称为是Fisher's Linear Dis ...
- AngularJS进阶(十)AngularJS改变元素显示状态
AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...
- C++多重继承与虚拟继承
本文只是粗浅讨论一下C++中的多重继承和虚拟继承. 多重继承中的构造函数和析构函数调用次序 我们先来看一下简单的例子: #include <iostream> using namespac ...
- 【Java编程】随机数的不重复选择
随机数的不重复选择就是从n个数中随机选取m(m<n)个数.在本文中,我们用Java来实现.因此我们先介绍Java的相关知识. 在Java中,Java.util.Set接口和Java.util.L ...
- HBase事务
众所周知,ACID是指原子性(Atomicity),一致性(Consistency),隔离性(Isolation)和持久性(Durability). HBase对同一行数据的操作提供ACID保证.HB ...
- shim & polyfill
在JavaScript中,经常提到shim和polyfill,polyfill是shim的一种.shim 是将不同 api 封装成一种,比如 jQuery 的 $.ajax 封装了 XMLHttpRe ...
- CSS3概述
首先我们了解下什么是css3,css3是css技术的一个升级.css3中并没有采用总体结构,而是采用分工协作的模块化结构. css3中的模块 模块名称 功能描述 basic box model 定义各 ...
- 搭建spring cloud config
很久没更新了,因为不是专职研究spring cloud,因此更新速度得看工作强度大不大,每天能抽出的时间不多,如果更新太慢了,并且有小伙伴看的话,请见谅了. Spring Cloud简介 Spring ...