jquery点击缩略图切换视频播放特效代码分享


Posted in Javascript onSeptember 15, 2015

本文实例讲述了jquery点击缩略图切换视频播放特效。分享给大家供大家参考。具体如下:

jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项卡代码,支持flash视频切换选项卡。

运行效果图:

 -------------------查看效果 下载源码-------------------

jquery点击缩略图切换视频播放特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。

为大家分享的jquery点击缩略图切换视频播放特效代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击缩略图切换视频播放</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* videobox */
.videobox{background:#ff6600;border:solid 5px #ff6600;width:408px;margin:30px auto 0 auto;}
.video-img{width:408px;height:266px;overflow:hidden;}
.video-list{height:78px;padding:15px 0 0 0;}
.video-list li{width:78px;height:59px;overflow:hidden;position:relative;float:left;border:solid 2px #fff;margin:0 10px;cursor:pointer;}
.video-list li .icon-video{position:absolute;left:22px;top:12px;width:33px;height:33px;z-index:99;}
.video-list li.now .icon-video{display:none;}
</style>
</head>

<body>
<div class="videobox">
 <div class="video-img">
 <embed id="js_videoCon_1" class="js_videoCon" src="http://player.youku.com/player.php/sid/XNTMyNzE2ODk2/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 <embed id="js_videoCon_2" class="js_videoCon" style="display:none" src="http://player.youku.com/player.php/sid/XNTMyNzM4MzA4/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 <embed id="js_videoCon_3" class="js_videoCon" style="display:none" src="http://player.youku.com/player.php/sid/XNTMyNzQ1MjQw/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 <embed id="js_videoCon_4" class="js_videoCon" style="display:none" src="http://player.youku.com/player.php/sid/XNTMyODE3NTU2/v.swf" allowFullScreen="true" quality="high" width="408" height="266" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 </div>
 <div class="video-list">
 <ul>
 <li class="now" id="http://player.youku.com/player.php/sid/XNTMyNzE2ODk2/v.swf" video="1" vid="1">
 <img src="images/video_1.jpg" width="78" height="59">
 <img src="images/icon-video.png" class="icon-video">
 </li>
 <li id="http://player.youku.com/player.php/sid/XNTMyNzM4MzA4/v.swf" video="2" vid="2">
 <img src="images/video_2.jpg" width="78" height="59">
 <img src="images/icon-video.png" class="icon-video">
 </li>
 <li id="http://player.youku.com/player.php/sid/XNTMyNzQ1MjQw/v.swf" video="3" vid="3">
 <img src="images/video_3.jpg" width="78" height="59">
 <img src="images/icon-video.png" class="icon-video">
 </li>
 <li id="http://player.youku.com/player.php/sid/XNTMyODE3NTU2/v.swf" video="4" vid="4">
 <img src="images/video_4.jpg" width="78" height="59">
 <img src="images/icon-video.png" class="icon-video">
 </li>
 </ul>
 </div>
</div>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 // 切换视频
 $(".video-list li").click(function(){
 var obj = $(this);
 var video_id = obj.attr("video");
 var path = obj.attr("id");
 var vid = obj.attr("vid");
 $(".js_videoCon").hide();
 $("#js_videoCon_"+vid).show();
 obj.addClass("now").siblings().removeClass("now");
 });
});
</script> 

</div>
<div style="text-align:center;clear:both"><br>
</div>
</body>
</html>

以上就是为大家分享的jquery点击缩略图切换视频播放特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 #Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 #Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
python中解析json格式文件的方法示例
2017/05/03 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
详解python中的模块及包导入
2019/08/30 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Django如何实现防止XSS攻击
2020/10/13 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
linux面试题参考答案(6)
2016/06/23 面试题
高中生评语大全
2014/04/25 职场文书
产品委托授权书范本
2014/09/16 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
单位政审意见范文
2015/06/04 职场文书
信息技术教研组工作总结
2015/08/13 职场文书