欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

轮播图 - 第一版

程序员文章站 2024-03-19 16:20:46
...

这是第一版，只是实现了滚动的效果，讲讲我的思路：设置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;
}

 

上一篇： Experiments in Streaming Content in Java ME(二)----Creating an RTSP Protocol Handler 博客分类： java移动研发  

下一篇： 用pycaffe训练图像

推荐阅读