渡一教育公开课web前端开发JavaScript精英课学习笔记（二十二）jQuery、css3 实现横向轮播图

最新推荐文章于 2022-10-26 09:24:45 发布

じоνё靁〃

最新推荐文章于 2022-10-26 09:24:45 发布

阅读量1.1k

点赞数

分类专栏： JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/88092421

版权

JavaScript、CSS、HTML 专栏收录该内容

38 篇文章 10 订阅

订阅专栏

横向轮播图

<!DOCTYPE html>
<html>

<head>
  <title>横向轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrapper {
      position: absolute;
      top: 50px;
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-style: preserve-3d;
      perspective: 800px;
    }

    .wrapper .img-box {
      position: absolute;
      width: 400px;
      height: 150px;
    }

    .wrapper .img-box img {
      position: absolute;
      width: 400px;
      height: 150px;
      border-radius: 10px;
      box-shadow: 5px 5px 5px #ccc;
      transition: all 0.5s;
    }

    .wrapper ul {
      position: absolute;
      bottom: 0;
    }

    .wrapper ul li {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="img-box">
      <img src="./imgs/1.jpg" alt="">
      <img src="./imgs/2.jpg" alt="">
      <img src="./imgs/3.jpg" alt="">
      <img src="./imgs/4.jpg" alt="">
      <img src="./imgs/5.jpg" alt="">
    </div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
<script src="./imgs/jquery-1.8.3.min.js"></script>
<script>
  var displayIndex = 2;
  var timer = 0;
  var zLevel = 100;
  var yLevel = 100;
  var imgs = $('.wrapper .img-box img');
  var lis = $('.wrapper ul li');

  function init() {
    show();
    bindEvent();
  }
  init();
  function show() {
    //修改图片样式
    var leftIndex,
        rightIndex,
        halfNum = Math.floor(imgs.length / 2);
    //当前图片
    imgs.eq(displayIndex).css({
      transform: 'translateZ(0px)', left: '0px',
        zIndex: 900 
      });

    for (var i = 0; i < halfNum; i++) {
      //左侧图片
      leftIndex = displayIndex - i -1;
      imgs.eq(leftIndex).css({
        transform: 'translateZ(' + (-(i + 1) * zLevel) + 'px)', left: (-(i + 1) * yLevel) + 'px',
        zIndex: 900 + (-(i + 1) * zLevel),
      });
      //右侧图片
      rightIndex = displayIndex + i + 1;
      if(rightIndex >= imgs.length){
        rightIndex -= imgs.length;
      }
      imgs.eq(rightIndex).css({
        transform: 'translateZ(' + (-(i + 1) * zLevel) + 'px)', left: ((i + 1) * yLevel) + 'px',
        zIndex: 900 + (-(i + 1) * zLevel),
      });
    }
    //修改 li 样式
    for(var i = 0; i < lis.length; i++){
      lis.eq(i).css({
        backgroundColor: '#ccc'
      });
    }
    lis.eq(displayIndex).css({
      backgroundColor: 'red'
    });

  }
  function bindEvent() {
    imgs.on('click', function () {
      displayIndex = $(this).index();
      console.log('img click', displayIndex);
      show();
    });
    lis.live('click', function () {
      displayIndex = $(this).index();
      console.log('li live click', displayIndex);
      show();
    });
    $('.wrapper').hover(function () {
      clearInterval(timer);
    }, function () {
      timer = setInterval(play, 2000);
    });
    timer = setInterval(play, 2000);
  }

  function play() {
    displayIndex++;
    if (displayIndex > $('.wrapper .img-box img').length - 1) {
      displayIndex = 0;
    }
    show();
  }

</script>
</html>

じоνё靁〃

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
渡一教育公开课web前端开发JavaScript精英课学习笔记（二十二）jQuery、css3 实现横向轮播图

横向轮播图&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;横向轮播图&lt;/title&gt; &lt;style&gt; * { margin: 0; padding: 0; } .wrapper { position: absolu...
复制链接

扫一扫

专栏目录