<!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. Zabbix-自带监控项与Kye

    开启主机自动发现 ⦁选择配置 ->自动发现 ->创建自动发现->ip范围必须连续,不连续的话逗号分开 ⦁更新间隔 -> 2s ->更新 ⦁检查 -> 选择新的 -& ...

  2. Codeforces 1190D. Tokitsukaze and Strange Rectangle

    传送门 注意到矩形往上是无限的,考虑把点按 $y$ 从大到小考虑 对于枚举到高度为 $h$ 的点,设当前高度大于等于 $h$ 的点的所有点的不同的 $x$ 坐标数量为 $cnt$ 那么对于这一层高度 ...

  3. 07 Nginx负载均衡

    1.负载均衡的实现. 1.准备三台虚拟机,比如 192.168.119.146 提供资源 192.168.119.147 提供nginx的负载均衡 192.168.119.148 提供资源 2.分别配 ...

  4. js之运算符（逻辑运算符）

    逻辑运算符通常用于布尔型(逻辑)值.这种情况下,它们返回一个布尔值.它经常和关系运算符一起配合使用.“&&” .“!”和“ ||” 运算符会返回一个指定操作数的值,因此,这些运算符也用 ...

  5. Darknet版YOLO安装与配置

    Darknet配置和安装 1. 安装显卡驱动 首先查看一下自己的电脑需要怎样的驱动,我们可以先到 http://www.nvidia.com/Download/index.aspx 查询下我们需要的是 ...

  6. 网络初级篇之DHCP原理与配置（原理与实验）

    一.什么是DHCP DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境 ...

  7. centos8 网卡命令(centos7也可用)

    nmcli n 查看nmcli状态 nmcli n on 启动nmcli nmcli c  up eth0 启动网卡eth0 nmcli c down eth0 关闭网卡eth0 nmcli d c ...

  8. 【2019.3.20】NOI模拟赛

    题目 这里必须标记一下那个傻逼问题,再不解决我人就没了! 先放一个 $T3$ $20$ 分暴力 #include<bits/stdc++.h> #define rep(i,x,y) for ...

  9. solr创建core

    创建Core的两种方法: 第一种方法: 1.打开dos命令窗口,切换目录到${solr.home}\bin,然后输入:solr create -c corename之后回车: 2.打开solr安装文件 ...

  10. 谨慎使用mysql的replace into（转载）

    MySQL 对 SQL 有很多扩展,有些用起来很方便,但有一些被误用之后会有性能问题,还会有一些意料之外的副作用,比如 REPLACE INTO. MySQL 在数据冲突时实际上是删掉了旧记录,再写入 ...