今天写了个蛋疼的弧形轮播图,怎么说也是原创了

看到一个弧形轮播图的设计稿,脑子里突然闪现出一个蛋疼的实现方式,轮播的脚本就不用说了,我的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>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Rindew的iOS技术分享

iOS 图片渐进式下载

1764
来自专栏编程之旅

iOS开发——MJExtension的实际使用,JSON格式解析

现在的iOS在跟服务器进行交互式,采取的常用数据格式是XML和JSON,而今天就探讨一个JSON解析框架 —— MJExtension。

1293
来自专栏Charlie's Road

图层树和寄宿图 -- iOS Core Animation 系列一

一个视图就是在屏幕上显示的一个矩形块(比如图片,文字或者视频),它能够拦截类似于鼠标点击或者触摸手势等用户输入。视图在层级关系中可以互相嵌套,一个视图可以管理它...

702
来自专栏進无尽的文章

实践-小效果 Ⅰ

一些小的功能点,虽然很小,但是里面有些弯,值得注意。(同系列文章会持续更新.......)

1223
来自专栏青玉伏案

iOS开发之各种动画各种页面切面效果

注:其中有些效果调用了CATransition的Private API, 仅供娱乐。 补充:还是有好多小伙伴问那些可以在AppStore中使用,调用私有API的...

19310
来自专栏王大锤

SDWebImage源码阅读-第三篇

3575
来自专栏進无尽的文章

实践-小效果 III

大家都知道这是通过 CAShapeLayer 和 CABasicAnimation 结合起来实现的,可是其中还是有需要注意的地方,实现的步骤大致如下:

872
来自专栏iOS开发攻城狮的集散地

iOS后台音频播放及锁屏歌词

2096
来自专栏Rindew的iOS技术分享

iOS 一个可滑动缩放的轮播图

1726
来自专栏移动端开发

Telegram学习解析系列(二):这我怎么给后台传输数据?

写在前面:          在iOS开发的过程中,有很多时候我们都在和数据打交道,最基本的就是数据的下载和上传了,估计很多很多的小伙伴都在用AFNetwork...

27710

扫码关注云+社区