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

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

相关文章

来自专栏nimomeng的自我进阶

抓住iOS的未来 - 30天学习编写30个Swift小程序

=======================================================

3192
来自专栏wOw的Android小站

[Android] 使用MediaProjection截屏

Android5.0以上提供了MediaProjection,方便截屏录屏等功能。

6381
来自专栏我和未来有约会

silverlight项目小结

最近又用silverlight做了一个小的东西,如图: ? 主要就是下边的导航,点击了后上边的大图和文字简介都跟着做相应的变化。 界面设计的思路:整个silve...

3716
来自专栏wym

Windows 下窗口画图---十天教会你俄罗斯方块

接上篇:https://blog.csdn.net/qq_41603898/article/details/80968333

1111
来自专栏cs

python爬虫练手,爬取名言,实现英语词典

她们的Html为,通过beautiful库的html.parser解析,通过id,class选择器,提取我们需要的东西。

885
来自专栏菩提树下的杨过

ExtJs学习笔记(2)_Basic GridPanel[基本网格]

这一节,将学习如何使用网络上最常见的UI控件_Grid 1.静态示例: 静态示例其实官方下载包里,就有sample,这里只贴出代码,后面的如何跟WCF结合,做出...

2049
来自专栏GIS讲堂

唐宋文学诗人分布展示

本文的数据是从搜韵获取而来的,地址为http://sou-yun.com/poetlife.html,为方便大家使用,将数据保存到了百度云盘,下载信息为:链接:...

1143
来自专栏C#

DocX在C#中的基本操作方法

    用了一个星期把园子里2016年中有关.net的文章都看了,有些只是大致的看了一下,在看的同时也在记录一些通用的方法。发现有很多对NPOI的文档,主...

2098
来自专栏Golang语言社区

go中的读写锁RWMutex

读写锁是针对于读写操作的互斥锁。 基本遵循两大原则: 1、可以随便读。多个goroutin同时读。 2、写的时候,啥都不能干。不能读,也不能写。 解释: 在32...

2727
来自专栏DOTNET

表现层设计模式

一、理论 1 MVC:模型-视图-控制器 模型: 指应用程序中,业务逻辑入口点对象。模型中包括:应用程序状态、视图展示的数据、响应用户请求的操作、执行控制器请求...

2714

扫码关注云+社区