<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3d旋转轮播</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#bac{width: 100%;height: 340px;background-color: lightgrey;position:relative;}
#picbox_all{margin:0 auto;width: 100%;height: 340px;position:relative;}
.picbox{position: absolute;border-radius: 5px;overflow: hidden;}
#picbox_1{width: 40%;height: 100%;left:30%;top:0;z-index: 99;box-shadow: 0 0 5px 5px gray;}
#picbox_3{width: 10%;height: 25%;left:45%;top:37%;}
#picbox_0{width: 20%;height: 50%;left:6%;top:25%;}
#picbox_2{width: 20%;height: 50%;left:74%;top:25%;}
.pic{width:100%;height: 100%;}
.left,.right{width:30px;height: 60px;position: absolute;top:calc(50% - 30px);}
.left:hover{width:40px;height: 80px;top:calc(50% - 40px);left:calc(2% - 5px);}
.right:hover{width:40px;height: 80px;top:calc(50% - 40px);left:calc(98% - 35px);}
.left{left:2%;}
.right{left:calc(98% - 30px);}
.divhover{box-shadow: 0 0 5px 5px gray!important;}
.picboxtitle{position:absolute;width:32%;height:15%;top:20%;left:7%;text-align: center;font-weight: bold;color: #444;}
.picboxcontent{position:absolute;width:30%;height:30%;top:63%;left:7%;color: #555;}
/*.clearfix:after{content:".";display:block;
height:0;
clear:both;
visibility:hidden;
}*/
</style>
<body>
<div id="bac">
<div id="picbox_all">
<img class="left" src="img/left.png"/>
<div class="picbox" id="picbox_0">
<img class="pic pic_0" src="img/1.jpg"/>
<div class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</div><div class="picbox" id="picbox_1">
<img class="pic pic_1" src="img/2.jpg"/>
<div class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</div><div class="picbox" id="picbox_2">
<img class="pic pic_2" src="img/3.jpg"/>
<div class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</div><div class="picbox" id="picbox_3">
<img class="pic pic_3" src="img/4.jpg"/>
<div class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</div>
<img class="right" src="img/right.png"/>
</div>
</div>
</body>

<script type="text/javascript">

var index = 1;
var index1;
var outside = 1;
var outsidewidth = $("#picbox_"+outside).css("width"); //获取最前方宽度
$(window).resize(function(){outsidewidth = $("#picbox_"+outside).css("width");}); //获取屏幕变化时宽度，屏幕变化触发事件
var ul = document.getElementById("picbox_all");
var lis = ul.getElementsByClassName("picbox");
//获取点击图片的index
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
index=this.index;
if ($("#picbox_"+index).css("width") == outsidewidth ){ //这里出现问题，若判定条件出现在循环外部则点击事件使得判定条件会混乱，可能导致的原因是
//同一个节点的不同点击事件可能会存在执行先后的问题
if (index == 0) {
console.log(900);
window.location.href = '#';
} else if (index == 1) {
console.log(100);
window.location.href = 'https://www.baidu.com/';
} else if (index == 2) {
console.log(200);
window.location.href = '#';
} else if (index == 3) {
console.log(300);
window.location.href = '#'; //只有当图片在最前方的时候点击才会跳转链接
}
}
}
}
function rotateleft(){ //滑动动画效果
$("#picbox_"+index).animate({'width': '40%','height': '100%','left':'30%','top':'0',
},1200).css({'z-index': '99','box-shadow': '0 0 5px 5px gray'})
index1=(index+3)%4;
$("#picbox_"+index1).animate({'width': '20%','height': '50%','left':'6%','top':'25%',
},1200).css({'z-index': '0','box-shadow': '0 0 0 0 gray'})
index1=(index+2)%4;
$("#picbox_"+index1).animate({'width': '10%','height': '25%','left':'45%','top':'37%',
},1200).css({'z-index': '80','box-shadow': '0 0 0 0 gray'})
index1=(index+1)%4;
$("#picbox_"+index1).animate({'width': '20%','height': '50%','left':'74%','top':'25%',
},1200).css({'z-index': '90','box-shadow': '0 0 0 0 gray'})
outside=index;
}
function rotateright(){ //滑动动画效果
$("#picbox_"+index).animate({'width': '40%','height': '100%','left':'30%','top':'0',
},1200).css({'z-index': '99','box-shadow': '0 0 5px 5px gray'})
index1=(index+1)%4;
$("#picbox_"+index1).animate({'width': '20%','height': '50%','left':'74%','top':'25%',
},1200).css({'z-index': '0','box-shadow': '0 0 0 0 gray'})
index1=(index+2)%4;
$("#picbox_"+index1).animate({'width': '10%','height': '25%','left':'45%','top':'37%',
},1200).css({'z-index': '80','box-shadow': '0 0 0 0 gray'})
index1=(index+3)%4;
$("#picbox_"+index1).animate({'width': '20%','height': '50%','left':'6%','top':'25%',
},1200).css({'z-index': '90','box-shadow': '0 0 0 0 gray'})
outside=index;
}
$(".picbox").on("click",function (){ //点击图片滑动
if ((outside+1)%4==index) {
rotateright();
} else if ((index+1)%4==outside) {
rotateleft();
}
})
$(".left").on("click",function (){ //点击左箭头滑动
if ( $("#picbox_"+outside).css("width") != outsidewidth){ //防连点
return false;
}
index = (index+3)%4;
rotateleft();
})
$(".right").on("click",function (){ //点击右箭头滑动
if ($("#picbox_"+outside).css("width") != outsidewidth ){ //防连点
return false;
}
index = (index+1)%4;
rotateright();
})

var automaticcarousel = setInterval(carousel, 4000); //自动轮播定时器

function carousel() {
index = (index+1)%4;
rotateright();
}

$(".picbox").mouseover(function(){ //模拟hover事件
//给当前的添加样式
$(this).addClass("divhover");
clearInterval(automaticcarousel); //鼠标进入阻止自动轮播
})
//鼠标出
$(".picbox").mouseout(function(){
$(this).removeClass("divhover");
automaticcarousel = setInterval(carousel, 4000); //鼠标出轮播重启
})
var titlefontsize = setInterval(function() {
var picboxtitle = document.getElementsByClassName("picboxtitle");
for (var i=0;i < picboxtitle.length; i++) {
picboxtitle[i].style.fontSize = picboxtitle[i].offsetWidth / 4 - 5 + "px"; //字体大小随图片大小而变化，定时器的动态查询功能
}
}, 10);
var contentfontsize = setInterval(function() {
var picboxcontent = document.getElementsByClassName("picboxcontent");
for (var i=0;i < picboxcontent.length; i++) {
picboxcontent[i].style.fontSize = picboxcontent[i].offsetWidth / 12 + "px";
}
}, 10);

</script>
</html>

引入的外部文件或图片有:

jq文件

四张素材图片

左右箭头图片

功能：点击图片滑动，点击箭头滑动，运动过程中防连点功能

四图3d旋转轮播的更多相关文章

  1. jQuery自适应-3D旋转轮播图

    3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/inc ...

  2. roundabout插件使用（3d旋转轮播图）兼容IE8

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. WPF特效-实现弧形旋转轮播图

    原文:WPF特效-实现弧形旋转轮播图 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/77004 ...

  4. Bootstrap图片旋转轮播的实现

    bootstrap初级知识旋转轮播 源文件:carousel.js.carousel.less CSS文件:bootstrap.css 这些源文件可以从bootstrap中下载,关于轮播,有很多译法, ...

  5. 3D轮播切换特效 源码

    这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...

  6. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  7. 微信小程序之 3d轮播（swiper来实现）

    以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...

  8. CSS3之3D轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

随机推荐

  1. excel批量修改文件名称

    步骤: 1. 然后将标准号所在的列复制三份到旁边相邻的空白列 2. 使用方方格子让三列中最左面的列只保存如下格式的数据: DB37/T或DB37/ 3. 使用方方格子让三列中中间的列的只保存如下格式的 ...

  2. golang中格式化符号说明

    %v 值的默认格式表示 %+v 类似%v,但输出结构体时会添加字段名 %#v 值的Go语法表示 %T 值的类型的Go语法表示 %% 百分号 布尔值: %t 单词true或false 整数: %b 表示 ...

  3. centos安装配置php

    PHP的安装同样需要经过环境检查.编译和安装3个步骤. 1.首先用百度搜索 “PHP:Downloads”, 点击第一个网页: 选择5.5.37版本,选择 .tar.gz 格式的文件: 来到镜像列表网 ...

  4. java实现spark常用算子之mapPartitions

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  5. Clang编译选项和Pass构建

    编译选项相关: 想要添加的选项,以我添加的-fdpu为例子 能通过clang --help得到的选项,整体需要一个解析文件(好像在LLVM项目中都是通过后缀名为xxx.td和xxx.def的文件来进行 ...

  6. 给定一个字符串，根据字符出现频率排序--Java实现

    题目描述: 给定一个字符串,请将字符串里的字符按照出现的频率降序排列. 示例 1: 输入:"tree" 输出:"eert" 解释:'e'出现两次,'r'和't' ...

  7. Array.reduce()方法

    Array.reduce()方法是对数组的遍历,返回一个单个返回值   使用方法: Array.reduce((acc, cur, idx, src) => { }, initialValue) ...

  8. Swift(二)基础部分

    数据类型 Swift 包含了 C 和 Objective-C 上所有基础数据类型.它还增加了 Objective-C 中没有的高阶数据类型比如元组(Tuple) 1.基础类型 Int整形和UInt无符 ...

  9. django优化--ORM优缺点

    谈Django绕不开ORM ORM : ORM概念,ORM特点,ORM 的优点,ORM 的缺点 orm : 对象关系映射 (Object Relational Mapping) ,用于实现面向对象编程 ...

  10. python、第五篇：数据备份、pymysql模块

    一 IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具 下载链接:https://pan.baidu.com/s/1bpo5mqj 掌握: #1. 测试+链接 ...