<!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. python-day29(正式学习)

    目录 元类 什么是元类 为什么用元类 内置函数exec class创建类 type实现 自定义元类 _ _ call _ _ _ _ new _ _ 自定义元类控制的实例化 属性查找顺序 元类 警告! ...

  2. HTML（上）

    目录 HTML(上) 浏览器 HTML 什么是HTML HTML的作用 编写HTML的规范 HTML结构 HTML常用标签 HTML标签速记 HTML(上) 浏览器 浏览器也是一个客户端 #这是一个服 ...

  3. java.util.MissingFormatArgumentException: Format specifier '%s'

    java.util.MissingFormatArgumentException: Format specifier '%s' at java.util.Formatter.format(Format ...

  4. ITCAST-C# 委托

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace _12委 ...

  5. CSS---解决文本溢出，换行

    当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...

  6. CentOS7 ab压力测试安装

    ①.ab(apache benchmark)安装 命令: yum -y install httpd-tools ②.ab测试的命令参数 命令: ab 或 ab -help 显示命令参数如下 ③.ab的 ...

  7. linux无界面模式安装selenium+chrome+chromedriver并成功完成脚本（亲测可用）

    环境:docker centos 7.4 能通外网 写好的selenium脚本. 具体步骤: 一:安装selenium  这是最简单的 直接利用 pip3 install selenium 二 安装c ...

  8. TypeScript如何添加自定义d.ts文件（转）

    方法一:https://dingyuliang.me/angular-6-typescript-2-9-typings-d-ts-cant-find-names/ 方法二:https://www.be ...

  9. 指针、数组与sizeof运算符

    指针.数组与sizcof运算符 (1)sizeof是c语言的一个运算符(主要sizeof不是函数,虽然用法很像函数),sizeof的作用是用来返同()里面的变量或者数据类型占用的内存字节数. (2)s ...

  10. jQuery和Prototype的兼容性和冲突的多种解决方法

    有两种情况: 1.先加载Prototype,再加载jQuery. 2.先加载jQuery,再加载Prototype. 针对情况1:先加载Prototype,再加载jQuery.方法一:jQuery 库 ...