1. 首页
  2. web前端

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

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

原创文章,作者:jing

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=1715

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code