原生js经典案例*轮播图

 直接来代码!

h5

<div class="banner" id="banner">
        <ul class="imgBox">
            <li class="active"><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
            <li ><img src="" alt=""></li>
        </ul>
        <!-- 焦点 -->
        <ol class="pointBox"></ol>
        <!-- 左右切换 -->
        <div class="prev">&lt;</div>
        <div class="next">&gt;</div>
</div>

css样式

<style>
           /* 取消默认样式 */
        ul, ol, li {
          list-style: none;
        }
        
        .banner {
          width: 600px;
          height: 400px;
          border: 10px solid orangered;
          margin: 30px auto;
          position: relative;
        }
    
        .banner > ul {
          width: 100%;
          height: 100%;
          position: relative;
        }
        
        .banner > ul > li {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          /* 隐藏照片 */
          opacity: 0;
          transition: opacity .5s linear;
        }
        .banner > ul > li > img {
            width: 100%;
            height: 100%;
        }
        /* 显示照片 */
        .banner > ul > li.active {
          opacity: 1;
        }
        /* 设置焦点 */
        .banner > ol {
          width: 200px;
          height: 30px;
          background-color: rgba(0, 0, 0, .3);
          position: absolute;
          left: 30px;
          bottom: 30px;
          border-radius: 15px;
    
          display: flex;
          
          justify-content: space-evenly;
          align-items: center;
        }
    
        .banner > ol > li {
          width: 20px;
          height: 20px;
          background-color: #fff;
          border-radius: 50%;
          cursor: pointer;
        }
        
        .banner > ol > li.active {
          background-color: red;
        }
    
        .banner:hover > div {
          display: flex;
        }
        /* 左右切换 */
        .banner > div {
          width: 30px;
          height: 40px;
          background-color: rgba(0, 0, 0, .2);
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 20px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          display: none;
        }
    
        .banner > div:hover {
          background-color: rgba(0, 0, 0, .5);
        }
    
        .banner > div.prev {
          left: 0;
        }
    
        .banner > div.next {
          right: 0;
        }
      </style>

js部分,ES6类语法 面向对象思想来实现

class Banner{
   // 获取元素,
  constructor(select){
      this.ele=document.querySelector(select)
        // 获取图片盒子,获取焦点
      this.imgBox=this.ele.querySelector('.imgBox')
      this.pointBox=this.ele.querySelector('.pointBox')
        //为了计数用
      this.index=0
        // 为了定时器自动轮播用
      this.timer=0
        // 调用方法
      this.init()
  }

  init(){
      this.setPoint()
      this.autoPlay()
      this.overOut()
      this.bindEvent()
  }
    //  设置生成焦点,
  setPoint () {
        // 定义焦点数量,和图片数量相等
      const pointNum=this.imgBox.children.length
         // 循环焦点
      for (let i = 0; i < pointNum; i++) {
        // 生成焦点元素
          const li = document.createElement('li')
        // 添加类名,为了下面方便使用,添加自定义属性计数值
          li.classList.add('point')
          li.dataset.i=i
        // 默认第一个焦点添加active类名
          if(i===0) li.classList.add('active')
        // 插入焦点盒子
          this.pointBox.appendChild(li)
      }
      // 重新设置焦点宽度,为了美观
      this.pointBox.style.width = pointNum*30+'px'
  }
  // 切换一张,为了实现自动轮播,先搞定切换一张
  changeOne (type) {
    // 初始 imgBox pointBox 去除active样式
    this.imgBox.children[this.index].classList.remove('active')
    this.pointBox.children[this.index].classList.remove('active')
    // type参数为了判断向后一张 或向前一张 或点击一张
    switch (type) {
        case true:
            // 判断true 就是加一张
            this.index ++
            break;
        case false:
            // 判断false 就是上一张
            this.index--
            break;
        default:
            // 当用户点击point,就是该一张
            this.index = type

    }
    // 界限判定,到达最后一张要切到第一张,或倒着第一张切换到最后一张
    if(this.index >= this.imgBox.children.length) this.index = 0
    if(this.index < 0) this.index = this.imgBox.children.length - 1
    // 给这一张或这一个焦点添加active
    this.imgBox.children[this.index].classList.add('active')
    this.pointBox.children[this.index].classList.add('active')
  }
    // 自动轮播,定时器实现,可以改变轮播速度
  autoPlay () {
      this.timer = setInterval (() => this.changeOne(true),1500)
  }
    // 鼠标移入,暂停定时器,停止轮播,鼠标移出,开启自动轮播
  overOut () {
      this.ele.addEventListener('mouseover', () => clearInterval(this.timer) )
      this.ele.addEventListener('mouseout', () => this.autoPlay())
  }
    // 用户手动点击切换图片
  bindEvent () {
      this.ele.addEventListener('click',(e) => {
        // 简单兼容一下
        e = e || window.event
        // 获取事件目标 并考虑兼容
        const target = e.target ||e.srcElement
        // 判断点击谁
        // 点击上一张,false 就是index--
        if (target.className === 'prev') this.changeOne(false)
        // 点击下一张, true 就是index++
        if (target.className === 'next') this.changeOne(true)
        // 点击某一张, 传入该元素携带的自定义属性值
        if (target.className === 'point') this.changeOne(target.dataset.i - 0)
      })
  }
}
// 调用
const b=new Banner('#banner')

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 我可以提供一些指导,但这取决于你有多少 JavaScript 经验。首先,你需要准备一组图片,然后为每张图片创建一个<img>元素。接下来,你需要创建一个 JavaScript 函数来控制图片的显示和隐藏,以及设置一个定时器来自动触发图片切换动作。最后,你可以添加一些按钮来控制轮播图的播放和暂停。 ### 回答2: 轮播图网页中常见的一种展示多张图片或者内容的效果,下面是使用原生JS编写的一个简单轮播图的示例: HTML结构: ```html <div class="slider"> <ul class="slider-list"> <li><img src="image1.jpg" alt="image1"></li> <li><img src="image2.jpg" alt="image2"></li> <li><img src="image3.jpg" alt="image3"></li> </ul> <button class="prev-btn">上一页</button> <button class="next-btn">下一页</button> </div> ``` CSS样式: ```css .slider { position: relative; width: 400px; height: 300px; overflow: hidden; } .slider-list { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; display: flex; transition: all 0.5s ease-in-out; } .slider-list li { flex: 0 0 100%; } .prev-btn, .next-btn { position: absolute; top: 50%; transform: translateY(-50%); } .prev-btn { left: 10px; } .next-btn { right: 10px; } ``` JavaScript代码: ```javascript window.addEventListener("load", function() { var sliderList = document.querySelector(".slider-list"); var prevBtn = document.querySelector(".prev-btn"); var nextBtn = document.querySelector(".next-btn"); var imageWidth = sliderList.firstElementChild.clientWidth; var currentImageIndex = 0; nextBtn.addEventListener("click", function() { if (currentImageIndex < sliderList.children.length - 1) { currentImageIndex++; var translateXValue = -currentImageIndex * imageWidth; sliderList.style.transform = "translateX(" + translateXValue + "px)"; } }); prevBtn.addEventListener("click", function() { if (currentImageIndex > 0) { currentImageIndex--; var translateXValue = -currentImageIndex * imageWidth; sliderList.style.transform = "translateX(" + translateXValue + "px)"; } }); }); ``` 以上代码实现了一个简单的轮播图,点击“上一页”和“下一页”按钮可以切换图片。代码通过监听按钮的点击事件,在点击事件中改变轮播图的`translateX`属性来实现滑动效果。 ### 回答3: 轮播图网页中常见的组件之一,可以用来展示多张图片或内容的切换效果。下面是用原生JS写一个简单的轮播图的步骤: 1. HTML结构: 首先,在HTML中创建一个包含轮播图的容器,用来展示图片。可以使用`<div>`元素,并为其设置一个唯一的id,例如`<div id="slider">`。在容器内部,创建一个`<ul>`元素,并为其添加一个唯一的id,例如`<ul id="slider-list">`。然后,再在`<ul>`中创建多个`<li>`元素,每个`<li>`元素代表一个要展示的图片或内容。 2. CSS样式: 使用CSS样式来设置轮播图容器`<div>`和内部的`<ul>`元素的样式,例如设置宽度、高度、背景色等。还可以设置`<li>`元素的样式,例如设置宽度、高度、定位等,来控制图片或内容的展示方式。 3. JS逻辑: 使用原生JS来实现轮播图的逻辑部分。 - 首先,获取轮播图容器和内部`<ul>`元素的引用,可以使用`document.getElementById()`方法获取元素的引用。 - 获取所有的`<li>`元素的引用,并存储在一个数组中。 - 定义变量来存储当前展示的图片的索引,默认为0。 - 定义一个函数来切换图片。可以使用`style.display`属性来控制`<li>`元素的显示或隐藏状态。切换到下一张图片时,将当前展示的图片隐藏,将下一张图片显示。切换到最后一张图片时,再切换到第一张图片。 - 使用`setInterval()`函数来定时调用切换图片的函数,实现自动播放的效果。 4. 绑定事件: 可以为轮播图容器添加鼠标移入和移出的事件,分别停止和开始自动播放。 以上是用原生JS实现一个简单的轮播图的大致步骤,通过编写、测试和调试代码,可以使轮播图正常运行并展示多张图片或内容的切换效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值