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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
jquery 选取方法都有哪些
May 18 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
js实现图片轮播效果
Dec 19 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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
PHP文本数据库的搜索方法
2006/10/09 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
js中this的用法实例分析
2015/01/10 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
js的对象与函数详解
2019/01/21 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
医德医魂心得体会
2014/09/11 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2014年保洁工作总结
2014/11/24 职场文书