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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
div移动 输入框不能输入的问题
Nov 19 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 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
discuz安全提问算法
2007/06/06 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php关联数组快速排序的方法
2015/04/17 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python实现AdaBoost算法的示例
2020/10/03 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
机关财务管理制度
2014/01/17 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
园林系毕业生求职信
2014/06/23 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
python本地文件服务器实例教程
2021/05/02 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
Python使用openpyxl模块处理Excel文件
2022/06/05 Python