js轮播图

最新推荐文章于 2024-01-04 12:43:27 发布

呵末颜

最新推荐文章于 2024-01-04 12:43:27 发布

阅读量138

点赞数

分类专栏：轮播图文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_65450756/article/details/127436896

版权

本文介绍了如何仅使用HTML的一个ul元素，结合JavaScript和CSS来创建轮播图。CSS代码中包含详细注解，解释了各个部分的功能。JavaScript代码需要放置在ul元素下方以确保正常运行，否则将无法达到预期效果。文章还展示了一个完成后的轮播图效果。

摘要由CSDN通过智能技术生成

html只需要一个ul即可,其余用js和css来写

<ul id="banner"></ul>

css代码:代码中有注解讲述功能

<style>
    ul {
      height: 200px;
      width: 800px;
      padding: 0;
      position: absolute;
      /* 水平居中 */
      left: 50%;
      margin-left: -400px;
      /* 垂直居中 */
      top: 50%;
      margin-top: -100px;
      list-style: none;
    }

    /* 移入到轮播图区域把鼠标形状变成‘手’ */
    ul:hover {
      cursor: pointer;
    }

    li {
      position: absolute;
      left: 0;
      /* 过渡属性，让轮播图切换更自然 */
      transition: 0.4s;
    }
  </style>

js代码:要放在ul下方才能运行,否则没有效果

<script>
  //1.获取ul
  var cur_ul = document.getElementById('banner')
  // 2.创建一个数组实例
  var arr = new Array();

  // 用js来创建li、img元素，有多少张图片要轮播就循环多少次
  for (i = 1; i <= 5; i++) {
    // 创建li元素
    var cur_li = documen