JS和CSS实现的原生轮播图

简介: JS和CSS实现的原生轮播图

JS+CSS实现滑动轮播图

使用JS加CSS来实现的幻灯片,主要使用的是CSS的transform属性中的translate来实现,适合与用户交互的轮播图,展现轮播图的数量,用户可自由进行选择。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .cardBox {
      width: 600px;
      height: 300px;
      box-shadow: 0 0 10px gray;
      border-radius: 5px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }
    .imgBox {
      width: 3600px;
      height: 300px;
      transition: all 1s;
      transform: translateX(0px);
    }
    .item {
      width: 600px;
      height: 300px;
      float: left;
    }
    .item img {
      width: 100%;
    }
    .btn {
      width: 20px;
      height: 20px;
      top: calc(50% - 20px);
      border-right: solid white;
      border-top: solid white;
      position: absolute;
      z-index: 99;
      opacity: .6;
      cursor: pointer;
    }
    .btn:hover {
      opacity: 1;
    }
    .left {
      left: 15px;
      transform: rotate(-135deg);
    }
    .right {
      right: 15px;
      transform: rotate(45deg);
    }
    .pointBox {
      display: flex;
      width: 50%;
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      justify-content: center;
    }
    .pointBox li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: gray;
      margin: 0 10px;
      opacity: .7;
      cursor: pointer;
    }
    .pointBox li:hover {
      opacity: 1;
      background-color: white;
    }
  </style>
</head>
<body>
  <div class="cardBox">
    <div class="btn left"></div>
    <div class="btn right"></div>
    <ul class="imgBox">
      <li class="item">
        <img src="https://img2.baidu.com/it/u=2988589017,2923917558&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
      </li>
      <li class="item">
        <img src="https://img2.baidu.com/it/u=3867960631,2923014190&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">
        <img src="https://img0.baidu.com/it/u=891036130,2043934807&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">
        <img src="https://img1.baidu.com/it/u=1304255642,2961408783&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""
          srcset="">
      </li>
      <li class="item">
        <img src="https://img0.baidu.com/it/u=3822016102,3026244821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt=""
          srcset="">
      </li>
      <li class="item">
        <img src="https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""
          srcset="">
      </li>
    </ul>
    <ul class="pointBox">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script>
    let card = document.querySelector('.cardBox ul')
    let cardBox = document.querySelector('.cardBox')
    let items = document.querySelectorAll(".item")
    let leftBtn = document.querySelector(".left")
    let rightBtn = document.querySelector(".right")
    let points = document.querySelectorAll(".pointBox li")
    let index = 0
    items.forEach((item, index) => {
      let translateX = index * 600
      item.style.left = `${translateX}px`
    })
    let timer = null
    points[index].style.background = 'white'
    points[index].style.width = '16px'
    points[index].style.borderRadius = '5px'
    const initInterval = () => {
      timer = setInterval(() => {
        index++
        let pointIndex = index;
        points[pointIndex].style.background = 'white'
        points[pointIndex].style.width = '16px'
        points[pointIndex].style.borderRadius = '5px'
        if (pointIndex == 0) {
          points[5].style.background = 'gray'
          points[5].style.width = '8px'
        } else {
          points[pointIndex - 1].style.background = 'gray'
          points[pointIndex - 1].style.width = '8px'
        }
        let translateX = -index * 600
        card.style.transform = `translateX(${translateX}px)`
        if (index >= 5) {
          index = -1
        }
      }, 3000);
    }
    initInterval()
    cardBox.addEventListener("mouseover", () => {
      clearInterval(timer)
    })
    cardBox.addEventListener("mouseout", () => {
      initInterval()
    })
    // btn.addEventListener("mouseout", () => {
    //   initInterval()
    // })
    leftBtn.onclick = function () {
      if (timer) {
        clearInterval(timer)
      }
      if (index <= 0) {
        index = 6
      }
      index--
      let translateX = -index * 600
      card.style.transform = `translateX(${translateX}px)`
    }
    rightBtn.onclick = function () {
      if (timer) {
        clearInterval(timer)
      }
      index++
      let translateX = -index * 600
      card.style.transform = `translateX(${translateX}px)`
      if (index >= 5) {
        index = -1
      }
    }
    points.forEach((item, i) => {
      item.onclick = () => {
        points.forEach(element => {
          element.style.background = 'gray'
          element.style.width = '8px'
          element.style.borderRadius = '50%'
        });
        item.style.background = 'white'
        item.style.width = '16px'
        item.style.borderRadius = '5px'
        index = i;
        let translateX = -index * 600
        card.style.transform = `translateX(${translateX}px)`
      }
    })
  </script>
</body>
</html>

 

 

JS+CSS实现浅入浅出轮播图

使用CSS的动画属性以及透明度属性来进行设置,显示轮播图数量,通过点击轮播图中的索引点来切换轮播图。适合需要和用户交互的简单轮播图

相关文章
|
12天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
12天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
3天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
9 0
|
11天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
12天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
17天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0