今天写了个蛋疼的弧形轮播图，怎么说也是原创了
看到一个弧形轮播图的设计稿，脑子里突然闪现出一个蛋疼的实现方式，轮播的脚本就不用说了，我的HTML结构，恩，就是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>caihong.cc,练小习弧形轮播图</title>
</head>
<body>
<style type="text/css">
*{
margin:0;
padding: 0;
border: 0;
}
body{
background: #eee;
}
.top-mask, .bottom-mask{
width: 800px;
height: 30px;
position: absolute;
top: 170px;
left: 100px;
overflow: hidden;
z-index: 10;
background: none;
}
.bottom-mask{
top: 300px;
}
.top-mask .inner, .bottom-mask .inner{
width: 5500px;
height: 5500px;
border-radius: 50%;
position: absolute;
top: 0;
left:-2350px;
background: #eee;
}
.top-mask .inner{
top:-5470px;
}
.con{
width: 800px;
height: 160px;
position: absolute;
top: 170px;
left: 100px;
font-size: 0;
}
.con li{
display: inline-block;
margin: 0 5px;
}
.con li img{
height: 160px;
width: 150px;
}
</style>
<div class="top-mask"><div class="inner"></div></div>
<div class="con">
<ul>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
</ul>
</div>
<div class="bottom-mask"><div class="inner"></div></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
虽然图像被切去了一捏捏，但是比起来变型和矩阵实现的弧形，简单到蛋疼~
具体原理就是两个弧形的切割，其实格式是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>caihong.cc,练小习弧形轮播图</title>
</head>
<body>
<style type="text/css">
*{
margin:0;
padding: 0;
border: 0;
}
body{
background: #eee;
}
.top-mask, .bottom-mask{
width: 800px;
height: 30px;
position: absolute;
top: 170px;
left: 100px;
overflow: hidden;
z-index: 10;
background: none;
border: #ccc 1px solid;
}
.bottom-mask{
top: 300px;
}
.top-mask .inner, .bottom-mask .inner{
width: 5500px;
height: 5500px;
border-radius: 50%;
position: absolute;
top: 0;
left:-2350px;
background: #eee;
}
.top-mask .inner{
top:-5470px;
}
.con{
width: 800px;
height: 160px;
position: absolute;
top: 170px;
left: 100px;
font-size: 0;
}
.con li{
display: inline-block;
margin: 0 5px;
}
.con li img{
height: 160px;
width: 150px;
}
</style>
<div class="top-mask"><div class="inner"></div></div>
<div class="con">
<ul>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
<li><img src="http://img.itc.cn/photo/jZh1VV2Y3I1" alt="练小习的头像"></li>
</ul>
</div>
<div class="bottom-mask"><div class="inner"></div></div>
</body>
</html>
提示：你可以先修改部分代码再运行。
思路虽然有点蛋疼，但是绝对实用，童叟无欺啊！
如果需要真的变型效果，就需要用到transform了，比如：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>弧形轮播图</title>
<style>
*{margin: 0;padding: 0;border: 0;}
html,body{width: 100%; overflow-x:hidden;}
#main{
width: 1000px;
position: relative;
overflow: hidden;
height: 400px;
margin: 20px auto;
background-color: #272822;
-webkit-perspective: 500px;
perspective: 500px;
}
#disqus_thread{
max-width: 1000px;
margin: 0 auto;
}
#main img{
box-shadow: 0 0 7px #eee;
position: absolute;
width: 200px;
height: 140px;
background: #fff;
-webkit-transition: transform ease-out .5s;
transition: transform ease-out .5s;
left: 50%;
margin-left: -120px;
top: 100px;
z-index: -100;
border: 2px solid transparent;
display: none;
}
#main img[class^=current]{
display: block;
z-index: 1;
cursor: pointer;
transform-style: preserve-3d;
}
#main img.current, #main img:hover{
border: 2px solid #06f;
transform: translate3d(0,2px,0) rotateY(0deg) scale(.6) ;
}
#main img.current-1{
transform: translate3d(-130px,0,0) rotateY(20deg) scale(.62);
}
#main img.current-2{
transform: translate3d(-284px,-4px,0) rotateY(30deg) scale(.71);
}
#main img.current-3{
transform: translate3d(-490px,-10px,0) rotateY(40deg) scale(.86);
}
#main img.current-4{
transform: translate3d(-700px,0,0) rotateY(30deg) scale(.7);
}
#main img.current-a{
transform: translate3d(130px,0,0) rotateY(-20deg) scale(.62);
}
#main img.current-b{
transform: translate3d(280px,-4px,0) rotateY(-30deg) scale(.71);
}
#main img.current-c{
transform: translate3d(480px,-10px,0) rotateY(-40deg) scale(.86);
}
#main img.current-d{
transform: translate3d(800px,-16px,0) rotateY(-50deg) scale(.99);
}
</style>
</head>
<body>
<div id="main">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-a">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-b">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-c">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-d">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-4">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-3">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-2">
<img src="http://img.itc.cn/photo/jZh1VV2Y3I1" class="current-1">
</div>
<script>
(function($){
var main = $("main"),
list = main.children,
length = list.length,
_index = 0;
var turn = function(index){
_index = index % length;
for (var i = 0; i < length; i++) {
switch(i){
case index:
list[i].className = "current";
break;
case index-1:
case index-2:
case index-3:
case index-4:
case index+length-1:
case index+length-2:
case index+length-3:
case index+length-4:
list[i].className = "current-" + (length+index-i) % length;
break;
case index+1:
case index-length+1:
list[i].className = "current-a";
break;
case index+2:
case index-length+2:
list[i].className = "current-b";
break;
case index+3:
case index-length+3:
list[i].className = "current-c";
break;
case index+4:
case index-length+4:
list[i].className = "current-d";
break;
default:
list[i].className = "";
}
};
};
var rate = 1,
index = 0,
interval = setInterval(function(){
if( !rate ){
return;
}
index = (index+rate) % length;
turn( index );
},2000);
main.onmouseover = function(){
rate = 0;
};
main.onmouseout = function(){
rate = 1;
};
main.onclick = function(e){
if(e){
var tar = e.target;
if( "img" === tar.tagName.toLowerCase() ){
index = [].slice.call(list).indexOf( tar );
turn( index );
}
}
};
})(function(id){
return document.getElementById(id);
});
</script>
</body>
</html>
提示：你可以先修改部分代码再运行。