📌个人主页：个人主页
🧀 推荐专栏：前端开发成神之路 --【这是一个为想要入门和进阶前端开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻】
📝作者简介：从web开发，再到大数据算法，踩过了无数的坑，用心总结经验教训，助你在技术生涯一臂之力！若想获取更多精彩内容，敬请订阅专栏或者关注😁😂🤣😃😆😉😊😋😍😘🥰
⭐️您的小小关注是我持续输出的动力！⭐️
干货内容推荐
🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：
- 《小程序开发必备功能的吐血整理【个人中心界面样式大全】》
- 《微信小程序 | 动手实现双十一红包雨》
- 《微信小程序 | 人脸识别的最终解决方案》
- 《来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】》
- 《吐血整理的几十款小程序登陆界面【附完整代码】》
一、需求背景
在各类内容型的网站系统中，轮播图功能是再常用不过的模块。
很多时候轮播图起到的是一个展示预览重要内容的效果，所以一些很多用到的都是一些简单的图片和文字的滑动效果，没有那种让人眼前一亮的感觉。
像这种简单的滑动效果在各种网页中层出不穷。让我们看完之后没有更多的视觉冲击以及没有深刻的印象，交互感比较普通！
为此整理了一些较为酷炫的轮播图效果，网页端和小程序移动端都可以使用！并且配套源码！
二、样例展示
2.1 3D百叶窗效果
2.2 相框选择效果
2.3 图片层叠切换效果
2.4 3D折叠页效果
2.5 3D划桨页面拆分效果
文章来源：https://www.toymoban.com/news/detail-590627.html
2.6 层叠渐变效果
文章来源地址https://www.toymoban.com/news/detail-590627.html
三、完整源码
3.1 3D百叶窗效果源码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>js百叶窗图片3D旋转切换特效</title>
<style type="text/css" id="css">
/** 清除内外边距 **/
body, div, p, h1, h2, h3, h4, h5, h6, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
table,th,td /* table elements 表格元素 */{
margin:0;
padding:0;
}
body,
button, input, select, textarea /* for ie */ {
font: 12px/24px Arial, 'Microsoft Yahei',"宋体", sans-serif;
}
/*h1, h2, h3, h4, h5, h6 { font-size: 100%; }*/
address, cite, em, i { font-style: normal; } /* 将斜体扶正 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
li { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: none; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让a链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; line-height:normal; } /* 使得表单元素在 ie 下能继承字体大小 */
/** 重置表格元素 **/
table{ border-collapse: collapse; border-spacing: 0; }
input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;}
/* ie6 7 8(q) bug */
iframe{
display:block;
}
/* 清浮动 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1; /* for IE6 IE7 */
}
body{
background:black;
}
#List{
width:800px;
height:360px;
box-shadow:0 0 10px white;
margin:150px auto 0;
perspective:1500px;/* 站 在1000px之处看li */
}
#List li{
width:40px;
height:360px;
float:left;
position:relative;
opacity:1;
transform-style:preserve-3D;/* 3D空间 */
transform-origin:center center -180px;
}
#List li a,#List li span{
position:absolute;
width:100%;
height:100%;
}
#List li span{
width:360px;
position:absolute;
height:100%;
}
#List li a:nth-child(1){
left:0;
top:0;
background:url("img/1.png");
}
#List li a:nth-child(2){
left:0;
top:-100%;
background:url("img/2.png");
transform-origin:bottom;
transform:rotateX(90deg);
}
#List li a:nth-child(3){
left:0;
top:0;
background:url("img/3.jpg");
transform:translateZ(-360px) rotateX(180deg);
}
#List li a:nth-child(4){
left:0;
top:100%;
background:url("img/4.jpg");
transform-origin:top;
transform:rotateX(-90deg);
}
#List:hover li{
transform:rotateX(360deg);
}
#btns{
width:200px;
margin:80px auto;
}
#btns li{
width:40px;
height:40px;
background:red;
color:white;
float:left;
text-align:center;
line-height:40px;
font-style:italic;
border-radius:50%;
margin:0 5px;
font-weight:bold;
cursor:pointer;
}
#btns li.active{
background:purple;
color:black;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oList = document.getElementById("List");
var oCSS = document.getElementById("css");
var oBtn = document.getElementById("btns").children;
var iW = 40;
var shtml="";
var scss="";
var Lilength = oList.clientWidth / iW;
var iZindex= 0;
var iNow = 0;
var aLi;
var aLi = oList.children;
for (var i=0;i<Lilength;i++ )
{
i>Lilength/2?iZindex--:iZindex++;
shtml+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></li>';
scss += "#List li:nth-child("+(i+1)+") a{background-position:-"+(iW*i)+"px 0}";
scss += "#List li:nth-child("+(i+1)+"){z-index:"+iZindex+"}";
}
oList.innerHTML = shtml;
oCSS.innerHTML += scss;
for (var i=0;i<oBtn.length;i++ )
{
oBtn[i].index = i;
oBtn[i].onclick = function(){
oBtn[iNow].className = "";
for (var i=0;i<aLi.length;i++ )
{
aLi[i].style.transition = "0.8s "+i*50+"ms";
aLi[i].style.WebkitTransform="rotateX(-"+(this.index)*90+"deg)";
}
iNow = this.index;
oBtn[iNow].className = "active";
}
}
}
</script>
</head>
<body>
<ul id="List"></ul>
<ol id="btns" class="clearfix">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</body>
</html>
3.2 相框选择效果源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单易用的类似flash播放器的轮播图js效果</title>
<link rel="stylesheet" type="text/css" href="css/lanren.css" />
</head>
<body>
<!-- 代码部分begin -->
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<div class="text">加载图片说明......</div>
<div class="length">计算图片数量......</div>
<a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<div class="bg"></div>
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
<div id="small_pic" class="small_pic">
<ul style="width:400px;">
<li style=" filter: alpha(opacity:100); opacity:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
</div>
<script src="js/move.js"></script>
<!-- 代码部分end -->
</body>
</html>
3.3 图片层叠切换效果源码
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery层叠文字焦点图切换动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="m2usCon2">
<div class="container">
<div class="a-part por ovh about-fo">
<div class="main poa t-f noselect">
<div class="detail por">
<div class="btn poa prev dn m2usBtnL"></div>
<div class="btn poa next m2usBtnR"></div>
<div class="in por">
<div class="box poa" style="transform: translate(0px, -96px) scale(0.55, 0.55); opacity: 0.08;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="transform: translate(0px, -64px) scale(0.7, 0.7); opacity: 0.2;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="transform: translate(0px, -32px) scale(0.85, 0.85); opacity: 0.4;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
<div class="box poa" style="display: block; opacity: 1; top: 0px;">
<div class="box-in dn">
<div class="time"></div>
<p></p>
</div>
</div>
</div>
</div>
<div class="list f-cb por ovh">
<ul class="por">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/bocfe.js"></script>
<script language="javascript">
$(function(){
var Year = new Array(
[
["", "要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭"]
],
[
["", "重复别人所说的话，只需要教育；而要挑战别人所说的话，则需要头脑。——玛丽·佩蒂博恩·普尔"]
],
[
["", "人生就是学校。在那里，与其说好的教师是幸福，不如说好的教师是不幸。——海贝尔"]
],
[
["", "对一个人来说，所期望的不是别的，而仅仅是他能全力以赴和献身于一种美好事业。——爱因斯坦"]
],
[
["", "心如镜，虽外景不断变化，镜面却不会转动，这就是一颗平常心，能够景转而心不转。"]
],
[
["", "一份耕耘，一份收获，付出就有回报永不遭遇过失败，因我所碰到的都是暂时的挫折。"]
]
)
_PreLoadImg([
"images/m2yy_btn.png"
],function(){
// 初始化
$(".a-part").each(function(){
$(this).height(420)
FullBg($(this), $(this).find("img.bg"))
})
// ABOUT PART FOURTH
$(".about-fo .main").css("top", ($(window).height() - 572) / 2 )
$(".about-fo .box").each(function(){
$(this).find(".box-in").css("padding-top", 138 - $(this).find(".box-in").height() / 2 )
})
var $In = $(".about-fo .detail .in"),
InBl = true,
a = 0,
b = 0,
$FoUl = $(".about-fo .list ul"),
$FoLi = $(".about-fo .list li")
$FoUl.width($FoLi.width() * $FoLi.length)
$FoLi.eq(0).addClass("cur")
var cura = $(".about-fo .list li.cur").index()
$(".about-fo .box:last .box-in .time").html(Year[cura][0][0]).siblings().html(Year[cura][0][1])
$(".about-fo .box:last .box-in").show().css("padding-top", 138 - $(".about-fo .box:last .box-in").height() / 2 )
$(".about-fo .next").click(function(){
$(".about-fo .prev").stop().fadeIn(500);
if(!InBl){
return
}
InBl = false;
if(a == Year.length){
InBl = true
b = Year[a - 1].length
return
}
b ++ ;
if(b == Year[a].length){
b = 0
a ++
if(a > 4 && a < Year.length){
$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
}
$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
}
if(a == Year.length - 1 && b == Year[a].length - 1){
$(this).stop().fadeOut(500);
}
if(a == Year.length){
InBl = true
return
}
var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box").eq(0).before($list)
$In.find(".box").eq(0).css({
y : -96,
scale : 0.55,
opacity : 0.08
})
$In.find(".box").eq(4).stop().animate({
top : 26,
opacity : 0
}, 500).prev().stop().transition({
y : 0,
scale : 1,
opacity : 1
}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
$In.find(".box").eq(2).stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).prev().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).prev().stop().fadeIn(500, function(){
$In.find(".box").eq(4).remove()
InBl = true
})
})
$(".about-fo .prev").click(function(){
$(".about-fo .next").stop().fadeIn(500);
if(!InBl){
return
}
InBl = false;
if(a == 0 && b == 0){
InBl = true;
return
}
if(a == Year.length){
a --
b --
}
b --
if(a == 0 && b == 0){
$(this).stop().fadeOut(500);
}
if(b == - 1 ){
if(a > 0){
a --
if(a >= 4){
$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
}
$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
}
b = Year[a].length - 1
}
var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box:last").after($list)
$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
y : - 96,
scale : 0.55,
opacity : 0.08
}, 500).next().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).next().stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(4).stop().animate({
top : 0,
opacity : 1
}, 500, function(){
$In.find(".box:first").remove()
$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
InBl = true
}).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(4).find(".box-in").height() / 2)
})
$FoLi.click(function(){
if(!InBl){
return
}
InBl = false;
var n = $(".about-fo .list li.cur").index()
$(this).addClass("cur").siblings().removeClass("cur")
a = $(this).index(),
b = 0
if($(this).index() < 5){
$FoUl.stop().animate({marginLeft: 0}, 500)
}
if($(this).index() != 0){
$(".about-fo .prev").stop().fadeIn(500);
}else{
$(".about-fo .prev").stop().fadeOut(500);
}
if($(this).index() > n){
var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box").eq(0).before($list)
$In.find(".box").eq(0).css({
y : -96,
scale : 0.55,
opacity : 0.08
})
$In.find(".box").eq(4).stop().animate({
top : 26,
opacity : 1
}, 500).prev().stop().transition({
y : 0,
scale : 1,
opacity : 1
}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
$In.find(".box").eq(2).stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).prev().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).prev().stop().fadeIn(500, function(){
$In.find(".box").eq(4).remove()
InBl = true
})
}else{
var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
$In.find(".box:last").after($list)
$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
y : - 96,
scale : 0.55,
opacity : 0.08
}, 500).next().stop().transition({
y : -64,
scale : 0.7,
opacity : 0.2
}, 500).next().stop().transition({
y : -32,
scale : 0.85,
opacity : 0.4
}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
$In.find(".box").eq(4).stop().animate({
top : 0,
opacity : 1
}, 500, function(){
$In.find(".box:first").remove()
$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
InBl = true
}).find(".box-in").css("padding-top", 138 - $In.find(".box").eq(4).find(".box-in").height() / 2)
}
})
function aboutNews(n){
if(!NewsBl){
return
}
NewsBl = false
$(".about-fif .btn span").eq(n).addClass("cur").siblings().removeClass("cur");
var $UlMark = $(".about-fif ul.mark")
$UlMark.stop().animate({
left : - 1182,
opacity : 0
}, 500, function(){
$UlMark.css("left", -17).find("li").css({
left : 360,
opacity : 0
})
$(".about-fif ul").eq(n).css({
opacity : 1,
"z-index" : 2
}).addClass("mark").siblings().removeClass("mark").css({
opacity : 0,
"z-index" : 1
})
Enter($(".about-fif ul").eq(n).find("li").eq(0), "left", 0, 3, 500, 350)
setTimeout(function(){
NewsBl = true
}, 1200)
})
}
aboutNews(1);
})
})
</script>
</div>
</body>
</html>
3.4 3D折叠页效果源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery+HTML5 3D折页图片切换特效</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body><script src="/demos/googlegg.js"></script>
<!-- 代码 开始 -->
<div class="container">
<div class="main">
<div class="fs-slider" id="fs-slider">
<figure>
<img src="images/1.jpg" alt="image01" />
<figcaption>
<h3>Eloquence</h3>
<p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
</figcaption>
</figure>
<figure>
<img src="images/2.jpg" alt="image02" />
<figcaption>
<h3>Quintessential</h3>
<p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
</figcaption>
</figure>
<figure>
<img src="images/3.jpg" alt="image03" />
<figcaption>
<h3>Surreptitious</h3>
<p>Truffaut iphone flexitarian, banh mi thundercats cliche wolf biodiesel gastropub. </p>
</figcaption>
</figure>
<figure>
<img src="images/4.jpg" alt="image04" />
<figcaption>
<h3>Imbroglio</h3>
<p>Scenester fixie pickled, shoreditch fugiat enim craft beer retro mustache.</p>
</figcaption>
</figure>
<figure>
<img src="images/5.jpg" alt="image05" />
<figcaption>
<h3>Lissome</h3>
<p>Aute sunt aliqua do sapiente. Food truck ut sustainable thundercats four loko.</p>
</figcaption>
</figure>
</div><!-- /fs-slider -->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgslider.js"></script>
<script type="text/javascript">
$(function() {
$( '#fs-slider' ).imgslider();
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
2.5 3D划桨效果源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery图片桨式翻转轮播切换特效</title>
<script src="js/jquery-1.10.2.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body { text-align: center; background-color: #191919; }
li {
list-style: none;
}
#box {
position: relative;
width: 1050px;
height: 360px;
margin: 100px auto 10px;
}
#box ul li {
position: absolute;
left: 0;
top: 0;
width: 1050px;
height: 360px;
display: none;
}
#show {
position: absolute;
left: 0;
top: 0;
width: 1050px;
height: 360px;
perspective: 800px; /*井深*/
display: none;
}
#show div {
position: relative;
width: 525px;
height: 72px;
float: left;
transform-style: preserve-3d; /*创遭3d环境*/
}
#show div em {
position: absolute;
left: 0;
top: 0;
display: block;
width: 525px;
height: 72px;
}
#show div .em1 {
/*前面*/
background: url("img/1.png");
transform: translateX(5px);
}
#show div .em2 {
/*后面*/
background: url("img/2.png");
transform: translateZ(-5px) rotateX(-180deg);
}
#show div span {
position: absolute;
right: 0;
bottom: 0;
background-color: #999;
}
#show div span.span1 {
width: 10px;
height: 72px;
transform-origin: right;
transform: translateZ(-5px) rotateY(-90deg);
}
#show div span.span2 {
width: 525px;
height: 10px;
transform-origin: bottom;
transform: translateZ(-5px) rotateX(-90deg);
}
#show div.div2 .span1 {
left: 0;
transform-origin: left;
transform: translateZ(5px) rotateY(90deg);
}
/*规定左前动画旋转特效*/
@keyframes move1{
0%{
transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
animation-timing-function: ease;/*运动速度曲线*/
}
60%{
transform: rotateX(0deg) rotateZ(0deg) rotateY(-60deg);
animation-timing-function: ease-in;/*运动速度曲线*/
}
80%{
transform: rotateX(90deg) rotateZ(10deg) rotateY(-45deg);
animation-timing-function: ease-out;/*运动速度曲线*/
}
100%{
transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg);
}
}
@keyframes move2{
0%{
transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
animation-timing-function: ease;/*运动速度曲线*/
}
60%{
transform: rotateX(0deg) rotateZ(0deg) rotateY(60deg);
animation-timing-function: ease-in;/*运动速度曲线*/
}
80%{
transform: rotateX(90deg) rotateZ(-10deg) rotateY(45deg);
animation-timing-function: ease-out;/*运动速度曲线*/
}
100%{
transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg);
}
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="box">
<ul>
<li><img src="img/1.png" alt="pho"/></li>
<li><img src="img/2.png" alt="pho"/></li>
<li><img src="img/3.png" alt="pho"/></li>
<li><img src="img/4.png" alt="pho"/></li>
<li><img src="img/5.png" alt="pho"/></li>
</ul>
<div id="show"></div>
</div>
<input type="button" id="prev" value="上一张"/>
<input type="button" id="next" value="下一张"/>
<script>
var oShow = document.getElementById("show");
var oBox = document.getElementById('box');
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var oLi = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
var oImg = oBox.getElementsByTagName("ul")[0].getElementsByTagName("img");
oShow.iNow = 0;
oShow.urls = []; /*当前背景 给oshow对象添加一个自定义属性保存当前显示的图片*/
oShow.off = false;
/*保存图片路径*/
for (var i = 0; i < 5; i++) {
var oDiv1 = document.createElement("div");
var oDiv2 = document.createElement("div");
oDiv2.className = "div2";
oDiv1.innerHTML = "<em class='em1' style='background-position: 0-" + i * 72 + "px'></em><span class='span1'></span>" +
"<em class='em2' style='background-position: 0-" + i * 72 + "px'></em><span class='span2'></span>";
oDiv2.innerHTML = "<em class='em1' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span1'></span>" +
"<em class='em2' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span2'></span>";
oShow.appendChild(oDiv1);
oShow.appendChild(oDiv2);
}
oLi[0].style.display = "block";
/***********/
//获取图片
for (var i = 0; i < oImg.length; i++) {
oShow.urls.push(oImg[i].getAttribute("src"));
}
prev.onclick = function () {
if(oShow.off){
return; //
}
oShow.off = true;
var iNext = oShow.iNow - 1;
if (iNext < 0) {
iNext = oShow.urls.length - 1;
}
tab(iNext);//切换图片
};
next.onclick = function () {
if(oShow.off){
return; //
}
oShow.off = true;
var iNext = oShow.iNow + 1;
if (iNext >= oShow.urls.length) {
iNext = 0;
}
tab(iNext);//切换图片
};
function tab(iNext) {
var oEm1 = oShow.getElementsByClassName("em1");
var oEm2 = oShow.getElementsByClassName("em2");
var oDiv = oShow.getElementsByTagName("div");
for (var i = 0; i < oEm1.length; i++) {
//当前的这一张
oEm1[i].style.backgroundImage = "url(" + oShow.urls[oShow.iNow] + ")";
//后面的哪一张
oEm2[i].style.backgroundImage = "url(" + oShow.urls[iNext] + ")";
}
oShow.style.display = "block";
oLi[oShow.iNow].style.display = "none";
//给具体的十个div绑定定时器 实现旋转效果
for (var i = 0; i < oDiv.length; i+=2) {
var time = (i+1)*50;
oDiv[i].style.transform = "rotateX(0deg)";//左边
oDiv[i + 1].style.transform = "rotateX(0deg)";//右边
//具体每个div绑定定时器
setTimer(oDiv[i], time,"move1");
setTimer(oDiv[i + 1], time,"move2")
}
//动画执行完成之后
setTimeout(function(){
oShow.iNow = iNext;
oLi[oShow.iNow].style.display = "block";///inext.inow
oShow.style.display = "none";
oShow.off = false;
},(oDiv.length*50+1500))
}
function setTimer(obj,time,name){
obj.timer = setTimeout(function(){
//开启定时器之前先清除定时器
clearTimeout(obj.timer);
obj.style.animation = name + " 1.5s";
obj.style.transform = "rotateX(180deg)";
obj.timer = setTimeout(function(){
obj.style.animation = "";
clearTimeout(obj.timer);
obj.timer = null;
},1500);
},time)
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
2.6 层叠渐变效果源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery按钮控制叠加图片旋转木马切换代码</title>
<link rel="stylesheet" href="css/index.css">
<style>
body{background-color: #1D1D1D}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="carousel content-main">
<ul class="list">
<li><img src="img/photo_1.jpg"></li>
<li><img src="img/photo_2.jpg"></li>
<li><img src="img/photo_3.jpg"></li>
<li><img src="img/photo_4.jpg"></li>
<li><img src="img/photo_5.jpg"></li>
<li><img src="img/photo_3.jpg"></li>
<li><img src="img/photo_4.jpg"></li>
<li><img src="img/photo_5.jpg"></li>
<li><img src="img/photo_3.jpg"></li>
<li><img src="img/photo_4.jpg"></li>
<li><img src="img/photo_5.jpg"></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
var setting = {
width:1000,
height:270,
postWidth:658,
postHeight:270,
scale:0.8,
speed:500,
verticalAlign:"center"
}
$(".carousel").attr("data-setting",'{ "width":900,"height":411,"postWidth":658}')
Carousel.init($(".carousel"))
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
到了这里，关于前端效果积累 ｜别具一格的3D酷炫轮播图效果收集的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
