JS实现时间轴自动播放

最近实现了一个这样的效果，点击播放按钮，时间轴开始播放，点击暂停，停止在当前位置，当再次点击播放的时候，从当前位置开始继续播放，也可以点击相应的年份，切换过去，这时候播放自动暂停，当再次点击播放的时候，从当前位置出发。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
  <style scoped>
   ul,
   li,
   html,
   body {
    margin: 0;
    padding: 0;
   }

   #timeline {
    list-style: none;
    text-align: center;
    background: url('img/xuanduan.png') 9px top repeat-y;
   }

   #timeline li {
    background-image: url('img/tuoyuan1.png');
    background-repeat: no-repeat;
    background-position: 0 15px;
    background-size: 20px 20px;
    padding-left: 30px;
    height: 50px;
    line-height: 50px;
    color: #444;
    width: 70px;
   }

   #timeline li p {
    width: 70px;
    cursor: pointer;
    margin: 0;
   }

   .biaoqian {
    background: url('img/biaoqian.png') 2px 13px no-repeat;
    ;
    background-size: 60px 24px;
    color: #fff;
   }

   #timeline .selecteded {
    background: url('img/tuoyuan2.png') 0 15px no-repeat;
    background-size: 20px 20px;
   }

   .scroll-shell {
    width: 100px;
    height: 96%;
    margin-top: 1.5%;
    margin-left: 20px;
    float: left;
    overflow: hidden;
   }

   .scroll {
    width: 118px;
    height: 103%;
    overflow: auto;
    overflow-x: hidden;
   }
  </style>
 </head>
 <body>
  <div class="scroll-shell">
   <ul style="" id="timeline" ref="timeline" @click="timeline($event)" class="scroll">

   </ul>
   <i class="iconfont icon-bofang" id="bofangzanting" style="font-size: 38px;position: absolute;left: 25px;top: 91%;"></i>
  </div>
  <script>
   let years = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
   let index = 0
   let timer=null
   //创建时间轴对应的li
   years.map(k => {
    let createLi = document.createElement('li')
    let createP = document.createElement('p')
    createP.innerHTML = k
    createLi.appendChild(createP)
    timeline.appendChild(createLi)
   })
   //默认选中第一个
   var lis = document.querySelectorAll('#timeline li')
   lis[0].classList.add('selecteded')
   var ps = document.querySelectorAll('#timeline li p')
   ps[0].classList.add('biaoqian')

   //点击事件,点击其中一个切换到相应的效果
   var ulElement = document.querySelector('#timeline')
   ulElement.onclick = function(e) {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#timeline li p')
    let event = e || window.event
    let target = event.target || event.srcElement
    if (target.tagName == 'P') {
     classChange(ps, lis, target)
     for (let i = 0; i < lis.length; i++) {
      console.log(lis[i].getAttribute('class'))
      if (lis[i].getAttribute('class') == 'selecteded') {
       //记住此时被点击的索引,方便点击播放按钮时继续播放
       index = i
       console.log(index)
       break;
      }

     }
    }
   }

   //公共部分,清除掉所有的样式,再给点击的添加相应的类名
   function classChange(ps, lis, target) {
    ps.forEach(k => {
     k.classList.remove('biaoqian')
    })
    target.classList.add('biaoqian')
    lis.forEach(v => {
     v.classList.remove('selecteded')
    })
    target.parentNode.classList.add('selecteded')
   }

   //播放和暂停按钮
   let bofangzanting = document.getElementById('bofangzanting')
   if (bofangzanting) {
    bofangzanting.onclick = () => {
     if (bofangzanting.className.indexOf('bofang') != -1) {
      console.log('点击播放')
      console.log(timer)
      bofangzanting.classList.remove('icon-bofang')
      bofangzanting.classList.add('icon-zanting')
      if (timer == undefined) {
       autoPlay()
      }
     } else {
      console.log('点击暂停')
      bofangzanting.classList.remove('icon-zanting')
      bofangzanting.classList.add('icon-bofang')
      if (timer) {
       timer = clearInterval(timer)
      } else {
       return
      }
     }
    }
   }

   //自动播放
   function autoPlay() {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#timeline li p')
    timer = setInterval(() => {
     console.log('自动播放啦！')
     if (index < ps.length - 1) {
       //执行下一个
      classChange(ps, lis, ps[index + 1])
      index++
     } else {
       //跳转到开始
      index = 0
      classChange(ps, lis, ps[index])
     }
     console.log(index)
    }, 1000)
   }
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS指定音频audio在某个时间点进行播放

    前言: 今天接到一个需求,需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟,我要让它默认从第2秒的时候开始播放),这里当然想到了H5中的audio元素,当然我们平时看这个标签上显示的音频时间格式是时:分:秒的格式的因此需要涉及到秒和时间格式的转化.因为刚开始对这块十分的陌生,最后通过查阅了网上的一些资料,最终完美的把这些功能点做好了.在这里分享一下,希望能够帮助有需要的小伙伴. 获取音频时长: function getAudioDuratio

  • JS实现时间轴自动播放

    JS实现时间轴自动播放

    最近实现了一个这样的效果,点击播放按钮,时间轴开始播放,点击暂停,停止在当前位置,当再次点击播放的时候,从当前位置开始继续播放,也可以点击相应的年份,切换过去,这时候播放自动暂停,当再次点击播放的时候,从当前位置出发. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="styleshee

  • js实现时间轴自动排列效果

    js实现时间轴自动排列效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>timeline</title> <script src="http://7xnlea.com2.z0.glb.qiniucdn.com/jquery.min.js"></script> &l

  • Vue.js实现时间轴功能

    Vue.js实现时间轴功能

    本文实例为大家分享了Vue.js实现时间轴功能的具体代码,供大家参考,具体内容如下 GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key

  • JS特效实现图片自动播放并可控的效果

    不多说了,实现方法请看下面代码. 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" /> <link re

  • 如何利用JS实现时间轴动画效果

    如何利用JS实现时间轴动画效果

    目录 css动画 什么是时间轴动画? 动画对象 动画函数 思考 总结 css动画 在前端开发中,一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ,如: .div1 { width: 100px; height: 100px; background: red; animation: changeColor 2s; } @keyframes changeColor { 0% {background: red;} 50% {background: yellow;} 100% {

  • 使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

    目录 代码整理 JavaScript 中的 "帧" 实现"帧"的方法 1. setInterval 2. setTimeout 3. requestAnimationFrame 实现 Timeline 时间轴 实现 start 函数 实现 Animation 类 设计时间线的更新 添加 Delay 属性支持 实现暂停和重启功能 实现 Pause 实现 Resume 上一篇文章<用 JSX 实现 Carousel 轮播组件>中,我们实现了一个 "

  • JS 相册效果 自动播放[本地整合]

    JS 相册效果 自动播放[本地整合]

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 可控制渐隐渐现: Previous Next Play Stop function tM(Message) { $("testMessage").innerHTML=Message } function dR(topr) { document.write(topr) } function $(eleId) {return document.getElementById(eleId)} //预载图片 var imasrc=new

  • VUE实现时间轴播放组件

    VUE实现时间轴播放组件

    本文实例为大家分享了VUE实现时间轴播放组件的具体代码,供大家参考,具体内容如下 先上效果图吧 1.初始化的效果! 2.可以拖拽,鼠标放上显示时间 3.播放按钮后,正常播放 左右两个横线可以上一页下一页 下面说VUE接入的步骤: 1.index.html中引入js和css文件 <script src='../static/js/timePlay.js'></script> <link href='../static/css/timePlay.css' rel='stylesh

  • js实现点击切换和自动播放的轮播图

    js实现点击切换和自动播放的轮播图

    本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下 轮播图案例 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0"&

  • js实现自动播放匀速轮播图

    js实现自动播放匀速轮播图

    本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下 函数封装: ( 匀速运动函数) function animate(obj,target,step,speed){ clearInterval(obj.timer); var absStep = Math.abs(step); step = target > obj.offsetLeft ? absStep : -absStep; obj.timer = setInterval(function(){ var di

随机推荐