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

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

相关文章

来自专栏SeanCheney的专栏

《利用Python进行数据分析·第2版》第8章 数据规整:聚合、合并和重塑8.1 层次化索引8.2 合并数据集8.3 重塑和轴向旋转8.4 总结

在许多应用中,数据可能分散在许多文件或数据库中,存储的形式也不利于分析。本章关注可以聚合、合并、重塑数据的方法。 首先,我会介绍pandas的层次化索引,它广泛...

4669
来自专栏liuchengxu

Spark action 操作列表

+以下内容来自 Spark 官方文档 Actions 小节, 更多内容可查看官方文档. 如有不当之处, 欢迎指正.

673
来自专栏wannshan(javaer,RPC)

dubbo负载均衡代码分析2(一致性hash策略)

接上篇 https://cloud.tencent.com/developer/article/1109586 说 这篇说dubbo一致性hash负载均衡策略。...

3546
来自专栏用户2442861的专栏

教你如何迅速秒杀掉:99%的海量数据处理面试题

   一般而言,标题含有“秒杀”,“99%”,“史上最全/最强”等词汇的往往都脱不了哗众取宠之嫌,但进一步来讲,如果读者读罢此文,却无任何收获,那么,我也甘愿...

542
来自专栏用户2442861的专栏

百度面试总结

http://blog.csdn.net/zhaojinjia/article/details/12649823

602
来自专栏熊二哥

JDK1.8快速入门

JDK8提供了非常多的便捷用法和语法糖,其编码效率几乎接近于C#开发,maven则是java目前为止最赞的jar包管理和build工具,这两部分内容都不算多,就...

1859
来自专栏Spark学习技巧

spark调优系列之内存和GC调优

本文基于spark1.6讲解。 一,基本概述 调优内存的使用主要有三个方面的考虑:对象的内存占用量(你可能希望整个数据集都适合内存),访问这些数据的开销,垃圾...

3029
来自专栏鹅厂优文

深入浅出Lua虚拟机

本文标题是”深入浅出 Lua 虚拟机”,其实重点在浅出这两字上。毕竟作者的技术水平有限。但是听说名字要起的屌一点文章才有人看,故而得名。

80413
来自专栏Ldpe2G的个人博客

纯函数式堆(纯函数式优先级队列)part three ---- bootstrapping (自举)

681
来自专栏抠抠空间

jQuery实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script s...

2978

扫码关注云+社区