HTML和jquery实现播放功能

HTML和jquery实现播放功能一，如下图所示：

代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>Time play test</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style>*{padding: 0;margin: 0;list-style: none;text-decoration: none;}body{background: #efefef;}/*时间轴样式*/.heatMapTimer {position: absolute;width: 100%;z-index: 1;text-align: center;top: 40px;}.time-item{width: 25px;height: 25px;border-radius: 50%;margin: 0 11px;}.time-btn {border-radius: 3px;width: 30px;height: 30px;font-size: 23px;margin-right: 10px;}.time-item, .time-btn {display: inline-block;background: rgba(255,255,255,.6);cursor: pointer;}.time-txt-item {margin: 0 1px;width: 45px;height: 25px;}.time-txt-btn {width: 40px;height: 25px;}.time-txt-item, .time-txt-btn {background: rgba(0,0,0,.2);color:#fff;display: inline-block;}/*播放样式*/.time-play:before{display: block;content: '';border-top: 12px solid transparent;border-left: 12px solid #4745de;border-bottom: 12px solid transparent;width: 0;height: 0;text-align: center;margin: 3px auto 0;}/*暂停的样式*/.time-pause:before,.time-pause:after{content: ' ';border-radius: 3px;border-top:6px solid #4745de;border-bottom:6px solid #4745de;border-left: 3px solid #4745de;border-right:3px solid #4745de;margin: 3px;overflow: hidden;display: inline-block;height: 12px;}/*时间点选中样式*/.time-item.active{background-color: #4745de; /*34b93d*/}</style></head><body><div class="heatMapTimer"><ul class="time-line"><li class="time-btn time-play"></li></ul><ul class="time-txt-line"><li class="time-txt-btn">时间</li></ul></div><script>addTimeTitle();//为时间轴的li标签动态添加title属性(本篇默认加的是最近十二个小时的时间阶段，可根据自己的需要选择是否引用)function timeClick() {var timer,index,//定义li选中状态时的索引$timeUl=$(".time-line"),$timeLi=$(".time-line li");var lenCount=$timeLi.length-1;//去除第一个按钮li标签的长度$(".time-btn").removeClass("time-pause");if (!$('.time-btn').hasClass('.time-play')){$('.time-btn').addClass("time-play");}//点击播放时间轴事件$timeUl.on("click",".time-play",function () {$(this).removeClass("time-play").addClass("time-pause");index=Number($timeUl.find("li.active").attr("data-index"));//将字符串强制转换为数字类型clearInterval(timer);//清除定时器timer=setInterval(function () {//判断当前索引的位置，如果在最后一位则从第一个时间点开始，反之则按顺序播放if(lenCount==index+1){$timeUl.find("li:eq('"+lenCount+"')").removeClass("active");$timeUl.find("li:eq(1)").addClass("active");}else{$(".time-line li.active").next().addClass("active").siblings().removeClass("active");}$timeLi.each(function () {if($(this).hasClass("active")){index=Number($(this).attr("data-index"));//字符串转换为数字类型，索引从0开始}});},2000)});//点击暂停按钮事件$(".time-line").on("click",".time-pause",function () {$(this).removeClass("time-pause").addClass("time-play");clearInterval(timer);//清除定时器});//点击某个时间点时触发事件$timeLi.not(":first-child").click(function () {index=$(this).data("index");$(".time-btn").removeClass("time-pause").addClass("time-play");$(this).addClass("active").siblings().removeClass("active");clearInterval(timer);//清除定时器})}function addTimeTitle() {var date=[];for(var i=12;i>=1;i--){date.push({index:i,time:getFormatDate(i)});}//数组排序date= date.sort(function(a,b) {return a.index> b.index?-1:1;});$.each(date,function (index,item) {var li_str = '<li class="time-item" data-index="'+ index +'" title="'+item.time+'"></li>';if(index===0){li_str = '<li class="time-item active" data-index="'+ index +'" title="'+item.time+'"></li>';}$('.time-line').append(li_str);var li_txt_str = '<li class="time-txt-item" data-index="'+ index +'">'+item.time+'</li>';$('.time-txt-line').append(li_txt_str);});timeClick();//时间轴点击事件}//获取系统时间的最近二个小时function getFormatDate(hourCount){var now=new Date();var date=new Date(new Date(now.getTime() - hourCount * 600 * 1000));var year=date.getFullYear();var month=date.getMonth()+1;month=(month<=9)?"0"+month:month;var day=date.getDate();day=(day<=9)?"0"+day:day;var hour=date.getHours();hour=(hour<=9)?"0"+hour:hour;var minute=date.getMinutes();minute=(minute<=9)?"0"+minute:minute;//var dateTime=year+"-"+month+"-"+day +" "+hour+":00:00";var dateTime=hour+":"+minute;return dateTime;}</script></body>
</html>

HTML和jquery实现播放功能二，如下图所示：

代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>Time play test</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style>*{padding: 0;margin: 0;list-style: none;text-decoration: none;}body{background: #efefef;}/*时间轴样式*/.heatMapTimer {position: absolute;width: 100%;z-index: 1;text-align: center;top: 40px;}.time-item{width: 46px;height: 26px;margin: 0px;}.time-bgline{position:absolute;width: 46px;height: 10px;margin: 15px 0px 15px 0px;z-index: -1;}.time-bgnoline{position:absolute;width: 46px;height: 10px;margin: 15px 0px 15px 0px;background-color: rgba(255,255,255,.4);z-index: -1;}.time-bgline.spActiveW{width: 34px;}.time-bgline.spActiveC{background-color: #ECD572;}.time-btn {border-radius: 50%;width: 40px;height: 40px;font-size: 23px;margin-right: 10px;}.time-item {display: inline-block;cursor: pointer;}.time-btn {display: inline-block;background: rgba(255,255,255,.6);cursor: pointer;}/*进度条时间点选中样式*/.time-item.active:before{display: inline-block;content: '';width: 10px;height: 10px;border-radius: 50%;background: #ECD572;border:8px solid rgba(255,255,255);text-align: center;}.time-txt-item {margin: 0;width: 46px;height: 25px;color: rgba(147,148,168);}.time-txt-item.active {color: rgba(255,255,255);}.time-txt-btn {width: 40px;height: 25px;color: rgba(255,255,255);margin-right: 10px;}.time-txt-item, .time-txt-btn {display: inline-block;}/*播放样式*/.time-play:before{display: inline-block;content: '';border-top: 12px solid transparent;border-left: 12px solid #ECD572;border-bottom: 12px solid transparent;width: 0;height: 0;text-align: center;margin: 8px auto 0 4px;}/*暂停的样式*/.time-pause:before,.time-pause:after{content: ' ';border-radius: 3px;border-top:6px solid #ECD572;border-bottom:6px solid #ECD572;border-left: 3px solid #ECD572;border-right:3px solid #ECD572;margin: 8px 3px 0px 3px;overflow: hidden;display: inline-block;height: 12px;}</style></head><body><div class="heatMapTimer"><ul class="time-line"><li class="time-btn time-play"></li></ul><ul class="time-txt-line"><li class="time-txt-btn">时间</li></ul></div><script>addTimeTitle();//为时间轴的li标签动态添加title属性(本篇默认加的是最近十二个小时的时间阶段，可根据自己的需要选择是否引用)function timeClick() {var timer,index,//定义li选中状态时的索引$timeUl=$(".time-line"),$timeLi=$(".time-line li"),$timeSpan=$(".time-line span"),$timeTxtLi=$(".time-txt-line li");var lenCount=$timeLi.length-1;//去除第一个按钮li标签的长度$(".time-btn").removeClass("time-pause");if (!$('.time-btn').hasClass('.time-play')){$('.time-btn').addClass("time-play");}//点击播放时间轴事件$timeUl.on("click",".time-play",function () {$(this).removeClass("time-play").addClass("time-pause");index=Number($timeUl.find("li.active").last().data("index"));//将字符串强制转换为数字类型clearInterval(timer);//清除定时器timer=setInterval(function () {//判断当前索引的位置，如果在最后一位则从第一个时间点开始，反之则按顺序播放if(lenCount==index+1){$timeLi.eq(1).addClass("active").siblings().removeClass("active");$timeSpan.eq(0).addClass("spActiveC").siblings().removeClass("spActiveC");$timeSpan.eq(0).addClass("spActiveW").siblings().removeClass("spActiveW");$timeTxtLi.eq(1).addClass("active").siblings().removeClass("active");}else{$timeLi.eq(index+2).addClass("active").siblings().removeClass("active");$timeSpan.eq(index+1).addClass("spActiveC");if(index==lenCount-2){$timeSpan.eq(index+1).removeClass("spActiveW").siblings().removeClass("spActiveW");}else{$timeSpan.eq(index+1).addClass("spActiveW").siblings().removeClass("spActiveW");}$timeTxtLi.eq(index+2).addClass("active").siblings().removeClass("active");}index=Number($timeUl.find("li.active").last().data("index"));//字符串转换为数字类型，索引从0开始},2000)});//点击暂停按钮事件$(".time-line").on("click",".time-pause",function () {$(this).removeClass("time-pause").addClass("time-play");clearInterval(timer);//清除定时器});//点击某个时间点时触发事件$timeLi.not(":first-child").click(function () {//停止自动播放$(".time-btn").removeClass("time-pause").addClass("time-play");clearInterval(timer);//清除定时器//播放进度更新index=$(this).data("index");$(this).addClass("active").siblings().removeClass("active");$timeLi.each(function (i) {if(i<=index){$timeSpan.eq(i).addClass("spActiveC");}else{$timeSpan.eq(i).removeClass("spActiveC");}});if(index==lenCount-1){$timeSpan.eq(index).removeClass("spActiveW").siblings().removeClass("spActiveW");}else{$timeSpan.eq(index).addClass("spActiveW").siblings().removeClass("spActiveW");}$timeTxtLi.eq(index+1).addClass("active").siblings().removeClass("active");})}function addTimeTitle() {var date=[];for(var i=12;i>=1;i--){date.push({index:i,time:getFormatDate(i)});}//数组排序date= date.sort(function(a,b) {return a.index> b.index?-1:1;});$.each(date,function (index,item) {//创建进度条var li_str = '<lable class="time-bgnoline"></lable><span class="time-bgline" ></span><li class="time-item" data-index="'+ index +'" title="'+item.time+'"></li>';if(index===0){li_str = '<lable class="time-bgnoline" style="border-top-left-radius:5px;border-bottom-left-radius:5px;"></lable><span class="time-bgline spActiveW spActiveC" style="border-top-left-radius:5px;border-bottom-left-radius:5px;"></span><li class="time-item active" data-index="'+ index +'" title="'+item.time+'"></li>';}if(index===date.length-1){li_str = '<lable class="time-bgnoline" style="border-top-right-radius:5px;border-bottom-right-radius:5px;"></lable><span class="time-bgline" style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;"></span><li class="time-item" data-index="'+ index +'" title="'+item.time+'"></li>';}$('.time-line').append(li_str);//添加时间var li_txt_str = '<li class="time-txt-item" data-index="'+ index +'">'+item.time+'</li>';if(index===0){li_txt_str = '<li class="time-txt-item active" data-index="'+ index +'">'+item.time+'</li>';}$('.time-txt-line').append(li_txt_str);});timeClick();//时间轴点击事件}//获取系统时间的最近十二个小时function getFormatDate(hourCount){var now=new Date();var date=new Date(new Date(now.getTime() - hourCount * 600 * 1000));var year=date.getFullYear();var month=date.getMonth()+1;month=(month<=9)?"0"+month:month;var day=date.getDate();day=(day<=9)?"0"+day:day;var hour=date.getHours();hour=(hour<=9)?"0"+hour:hour;var minute=date.getMinutes();minute=(minute<=9)?"0"+minute:minute;//var dateTime=year+"-"+month+"-"+day +" "+hour+":00:00";var dateTime=hour+":"+minute;return dateTime;}</script></body>
</html>

HTML和jquery实现播放功能相关推荐

播放器图片html,jQuery实现类似视频播放功能的图片播放器插件
jquery Image Player是一款可以像视频播放一样逐张播放图片的图片播放器jQuery插件.当你需要介绍你的某个产品和项目的时候,这个插件就可以发挥它的强大作用.你可以将产品或项目的各个功 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
49 jQuery事件
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery事件注册单个事件注册语法: element.事件(function() ...
Web 开发最有用的 jQuery 插件集锦
一.Responsive SlideShow--图片滑块展示 1.Responsive Carousel responsive-carousel 是一个内容传送带插件,支持鼠标.触摸和键盘操作.默认包 ...
12款经典图片轮播jquery插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
jQuery事件绑定和解绑
jQuert事件 1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题. 缺点: 普通的事件注 ...
html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
jQuery入门 jQuery入门第三天
jQuery入门 jQuery入门第三天老师:黑马程序员文章目录 jQuery入门 jQuery入门第三天老师:黑马程序员 3. jQuery事件 3.1 jQuery事件注册 3.1.1 单个 ...

HTML和jquery实现播放功能

HTML和jquery实现播放功能相关推荐

最新文章

热门文章