【JavaScript】JavaScript实现纯原生轮播图

A Lucky Boy

已于 2022-05-13 14:27:28 修改

阅读量302

点赞数

分类专栏： javascript 文章标签： javascript elementui webview css3 html

于 2022-05-10 08:47:06 首次发布

本文链接：https://blog.csdn.net/weixin_43797577/article/details/124679955

版权

javascript 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

HTML部分源码：

<body>
  <div class="box">
    <div class="img"><img src="../images/1.png" alt=""></div>
    <div class="prev all">
      <a href="#">&lt;</a>
    </div>
    <div class="next all">
      <a href="#">&gt;</a>
    </div>
    <div class="title">
      <p>这是第一张图片</p>
      <ul class="ul">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>

CSS部分源码：

定义相关样式

<style>
  .box {
    margin: 0 auto;
    width: 500px;
    height: 365px;
    position: relative;
  }

  .img img {
    width: 500px;
    height: 310px;
  }

  .title {
    display: inline-block;
    width: 100%;
    height: 50px;
    margin-top: -5px;
    background-color: pink;
  }

  .title p {
    margin: 0px;
    text-indent: 1em;
    color: aqua;
  }

  .ul {
    display: flex;
    list-style: none;
    padding: 0px;
    margin: 0px;
  }


  .ul li {
    width: 8px;
    height: 8px;
    margin: 8px;
    border-radius: 50%;
    background-color: gray;
    cursor: pointer;
  }

  .all {
    position: absolute;
    top: 35%;
    width: 20px;
    height: 30px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 30px;
  }

  a {
    text-decoration: none;
    color: #fff;
  }

  a:hover {
    color: skyblue;
  }

  .prev {
    left: 0px;
    border-radius: 0 800px 800px 0;
  }

  .next {

    right: 0px;
    border-radius: 800px 0 0 800px;
  }

  .ul .active {
    width: 10px;
    height: 10px;
    background-color: #fff;
  }

JavaScript部分源码

JS整体实现思路：

1.获取元素

2.声明一个自增变量

3.判断长度如果大于数组长度，则重置（下一张）

4.修改元素内容

5.判断长度如果小于0，则跳到最后一张（上一张）

6.将相同代码封装到函数直接调用简化第四步上一张和下一张调用函数

7.定时器

8.鼠标经过停止定时器

9.鼠标离开重新进行自动播放（调用定时器调用前先停止一下）

<script>
 // 数组对象内存放图片，可以继续增加
  const arr = [
    { URL: '../images/1.png', title: '这是第一张图片', color: 'pink' },
    { URL: '../images/2.png', title: '这是第二张图片', color: 'rgb(43, 35, 26)' },
    { URL: '../images/3.png', title: '这是第三张图片', color: 'rgb(10, 67, 68)' },
    { URL: '../images/4.png', title: '这是第四张图片', color: 'rgb(40, 67, 68)' },
    { URL: '../images/5.png', title: '这是第五张图片', color: 'rgb(50, 67, 68)' },
    { URL: '../images/6.png', title: '这是第六张图片', color: 'rgb(100, 71, 68)' },
  ]
  /* 
  1.获取对象
  2.自动播放
  3.将共同的代码封装到一个函数内
  4.左右点击事件
  5.自动播放
  6.鼠标经过停止
  7.鼠标离开恢复自动播放
  */
  const box = document.querySelector('.box')
  const img = document.querySelector('img')
  const prev = document.querySelector('.prev a')
  const next = document.querySelector('.next a')
  const p = document.querySelector('.title p')
  const color = document.querySelector('.title')
  let i = 0
  // 封装一个共同代码的函数 更改页面样式
  function start() {
    img.src = arr[i].URL
    p.innerHTML = arr[i].title
    color.style.backgroundColor = arr[i].color
    document.querySelector('.ul .active').classList.remove('active')
    document.querySelector(`.ul li:nth-child(${i + 1})`).classList.add('active')
  }
  // 上一张
  prev.addEventListener('click', function () {
    i--
    if (i < 0) {
      i = arr.length - 1
    }
    start()
  })
  // 下一张
  next.addEventListener('click', function () {
    i++
    if (i >= arr.length) {
      i = 0
    }
    start()
  })
  // 定时器 自动播放
  let stop = setInterval(function () {
    next.click()
  }, 1000)
  // 鼠标经过停止
  box.addEventListener('mouseenter', function () {
    // 停止定时器
    clearInterval(stop)
  })
  // 鼠标离开继续播放
  box.addEventListener('mouseleave', function () {
    // 停止定时器 防止离开次数越多轮播效果越快
    clearInterval(stop)
    // 开启定时器
    stop = setInterval(function () {
      next.click()
    }, 1000)
  })

最终效果（有一张图片下边有白边，所以看起来像事没对齐样式，样式比较丑，可以自己更改，博主只是为了练习JS的语法语句，随便打的css样式）：

A Lucky Boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】JavaScript实现纯原生轮播图

HTML部分源码：<body> <div class="box"> <div class="img"><img src="../images/1.png" alt=""></div> <div class="prev all"> <a href="#">&lt;</a> </div> <div class="next all">
复制链接

扫一扫