??個人主頁：個人主頁
??? 推薦專欄：前端開發(fā)成神之路 --【這是一個為想要入門和進階前端開發(fā)專門開啟的精品專欄！從個人到商業(yè)的全套開發(fā)教程，實打實的干貨分享，確定不來看看？ ????】
??作者簡介：從web開發(fā)，再到大數(shù)據(jù)算法，踩過了無數(shù)的坑，用心總結經(jīng)驗教訓，助你在技術生涯一臂之力！若想獲取更多精彩內容，敬請訂閱專欄或者關注??????????????????????
??您的小小關注是我持續(xù)輸出的動力！??
干貨內容推薦
??入門和進階小程序開發(fā)，不可錯誤的精彩內容?? ：
- 《小程序開發(fā)必備功能的吐血整理【個人中心界面樣式大全】》
- 《微信小程序 | 動手實現(xiàn)雙十一紅包雨》
- 《微信小程序 | 人臉識別的最終解決方案》
- 《來接私活吧？小程序接私活必備功能-婚戀交友【附完整代碼】》
- 《吐血整理的幾十款小程序登陸界面【附完整代碼】》
一、需求背景
在各類內容型的網(wǎng)站系統(tǒng)中，輪播圖功能是再常用不過的模塊。
很多時候輪播圖起到的是一個展示預覽重要內容的效果，所以一些很多用到的都是一些簡單的圖片和文字的滑動效果，沒有那種讓人眼前一亮的感覺。
像這種簡單的滑動效果在各種網(wǎng)頁中層出不窮。讓我們看完之后沒有更多的視覺沖擊以及沒有深刻的印象，交互感比較普通！
為此整理了一些較為酷炫的輪播圖效果，網(wǎng)頁端和小程序移動端都可以使用！并且配套源碼！
二、樣例展示
2.1 3D百葉窗效果
2.2 相框選擇效果
2.3 圖片層疊切換效果
2.4 3D折疊頁效果
2.5 3D劃槳頁面拆分效果
文章來源：http://www.zghlxwxcb.cn/news/detail-590627.html
2.6 層疊漸變效果
文章來源地址http://www.zghlxwxcb.cn/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">計算圖片數(shù)量......</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(
[
["", "要使整個人生都過得舒適、愉快，這是不可能的，因為人類必須具備一種能應付逆境的態(tài)度?！R梭"]
],
[
["", "重復別人所說的話，只需要教育；而要挑戰(zhàn)別人所說的話，則需要頭腦?！旣悺づ宓俨┒鳌て諣?]
],
[
["", "人生就是學校。在那里，與其說好的教師是幸福，不如說好的教師是不幸?！Ｘ悹?]
],
[
["", "對一個人來說，所期望的不是別的，而僅僅是他能全力以赴和獻身于一種美好事業(yè)?！獝垡蛩固?]
],
[
["", "心如鏡，雖外景不斷變化，鏡面卻不會轉動，這就是一顆平常心，能夠景轉而心不轉。"]
],
[
["", "一份耕耘，一份收獲，付出就有回報永不遭遇過失敗，因我所碰到的都是暫時的挫折。"]
]
)
_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; /*創(chuàng)遭3d環(huán)境*/
}
#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);
}
/*規(guī)定左前動畫旋轉特效*/
@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綁定定時器 實現(xiàn)旋轉效果
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")
}
//動畫執(zhí)行完成之后
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模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
