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 Store的数据访问与更新问题
Apr 28 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
vue实现路由切换改变title功能
May 28 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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 JSON 数据解析代码
2010/05/26 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
php中__toString()方法用法示例
2016/12/07 PHP
JavaScript 反科里化 this [译]
2012/09/20 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JavaScript知识点整理
2015/12/09 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
webpack4简单入门实例
2018/09/06 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python+OpenCV实现图像拼接
2020/03/05 Python
了解一下python内建模块collections
2020/09/07 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
班级团队活动方案
2014/08/14 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
故意伤害辩护词
2015/05/21 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL