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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
Javascript自定义事件详解
Jan 13 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
python查找第k小元素代码分享
2013/12/18 Python
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python 中如何写注释
2020/08/28 Python
电子商务自荐书范文
2014/01/04 职场文书
公司端午节活动方案
2014/02/04 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
婚前保证书
2014/04/29 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
2015年派出所工作总结
2015/04/24 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书