<!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. 多个分组树分别实现单选jq+angular

    $scope.seletedGroup=[];var $li=$("#departmentsContainer>ol>li");$.each($li,function( ...

  2. dedecms 列表 用分页标签 判断 当第一页则显示，第二页以上不显示 土办法！

    arc.listview.class.php function GetPageListST($list_len,$listitem="index,end,pre,next,pageno,sp ...

  3. centos 7 安装 redis-5.0.5

    [root@localhost ~]# yum -y install gcc make [root@localhost ~]# wget http://download.redis.io/releas ...

  4. 递归型SPFA判负环 + 最优比例环 || [Usaco2007 Dec]奶牛的旅行 || BZOJ 1690 || Luogu P2868

    题外话:最近差不多要退役,复赛打完就退役回去认真读文化课. 题面:P2868 [USACO07DEC]观光奶牛Sightseeing Cows 题解:最优比例环 题目实际是要求一个ans,使得对于图中 ...

  5. [uboot] （第三章）uboot流程——uboot-spl代码流程 后续2018版本分析

    board_init_f在/u-boot-2018.07-fmxx/arch/arm/mach-fmxx/spl.c中定义 board_init_f之后,和转载的部分有出入: u-boot-2018. ...

  6. Python基于机器学习方法实现的电影推荐系统

    推荐算法在互联网行业的应用非常广泛,今日头条.美团点评等都有个性化推荐,推荐算法抽象来讲,是一种对于内容满意度的拟合函数,涉及到用户特征和内容特征,作为模型训练所需维度的两大来源,而点击率,页面停留时 ...

  7. 问题-CHM文件不显示

    原问题:http://bbs.csdn.net/topics/370230310 问题描述: http://download.csdn.net/download/wybneu/3582721 我从这个 ...

  8. 零拷贝的原理及Java实现

    在谈论Kafka高性能时不得不提到零拷贝.Kafka通过采用零拷贝大大提供了应用性能,减少了内核和用户模式之间的上下文切换次数.那么什么是零拷贝,如何实现零拷贝呢? 什么是零拷贝 WIKI中对其有如下 ...

  9. qt5---资源文件

    创建资源文件: 视频教程:https://www.bilibili.com/video/av66748323/ 右击工程目录--->-->--> 添加资源: 右击资源文件--> ...

  10. LINUX笔记之二常用命令（文件处理命令）

    一.概述 1. “.”开头的文件是隐藏文件,大小写敏感是因为用C语言编写 2. DOS中 cd..可回到父目录 在LINUX中要用cd ..(用空格) 3. 4.LINUX命令有两种:仅root可执行 ...