轮播图 - 第一版

最新推荐文章于 2021-05-24 07:50:56 发布

逸川先生

最新推荐文章于 2021-05-24 07:50:56 发布

阅读量222

点赞数

文章标签：轮播图

本文链接：https://blog.csdn.net/qq_38238041/article/details/86891779

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这是第一版，只是实现了滚动的效果，讲讲我的思路：设置width, height大小固定的div，使其居中，图片放在li中，li放在ul中，横向显式如下，先后思路就很清晰了啦，其实也就是改变ul的定位left，然后隐藏溢出部分，再加个动画效果，这第一版就这么完成了

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <link href="./slideshow.css" rel="stylesheet">
  <script src="../toos.js"></script>
  <script src="./slideshow.js"></script>
</head>
<body>
  <div class="outer">
    <ul class="img_list" id="imgList">
      <li><img src="../img/1.jpg" alt="图"/></li>
      <li><img src="../img/2.jpg" alt="图"/></li>
      <li><img src="../img/3.jpg" alt="图"/></li>
      <li><img src="../img/4.jpg" alt="图"/></li>
      <li><img src="../img/5.jpg" alt="图"/></li>
    </ul>
  </div>
</body>
</html>

JS：

window.onload = function() {
  /* 获取所有的图片 */
  var imgs = document.getElementsByTagName('img');
  /* 获取ul, 根据imgs的长度，动态设置其width */
  var ul = document.getElementById('imgList');
  ul.style.width = imgs.length * 530 + 'px';

  /* 定义定时器，定时修改ul的left */
  var timer = setInterval(function () {
    var left = (ul.offsetLeft-530 <= -imgs.length * 530) ? 0 : (ul.offsetLeft-530);
    ul.style.left = left + 'px';
  }, 2000);
};

CSS：

*{
  margin: 0;
  padding: 0;
}
.outer{
  position: relative;
  width: 530px;
  height: 475px;
  margin: 20px auto 0 auto;
  background-color: yellowgreen;
  overflow: hidden;
}
.img_list{
  transition: left 1s;
  left: 0;
  top: 0;
  position: absolute;
  list-style: none;
}
li{
  float: left;
  margin: 0 15px;
  width: 500px;
  padding: 15px 0;
}
img{
  width: 100%;
  display: block;
}