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>
<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{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="/imagesforcode/201505/video_1.jpg" width="78" height="59">
                <img src="/imagesforcode/201505/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="/imagesforcode/201505/video_2.jpg" width="78" height="59">
                <img src="/imagesforcode/201505/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="/imagesforcode/201505/video_3.jpg" width="78" height="59">
                <img src="/imagesforcode/201505/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="/imagesforcode/201505/video_4.jpg" width="78" height="59">
                <img src="/imagesforcode/201505/icon-video.png" class="icon-video">
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="/images/jquery-1.6.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>

<br>所需js文件:<a href="/images/jquery-1.6.2.min.js" target=_blank>jquery-1.6.2.min.js</a><hr>
时间: 2024-11-05 21:45:19

jquery点击缩略图切换视频播放的视频切换焦点图效果的相关文章

原生JS实现 ‘Tab栏切换’,‘手风琴’,‘轮播图’效果

1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

15款jQuery带缩略图的图片轮播切换特效代码

JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚动图片轮播切换 jquery图片滑动切换效果左右按钮控制图片滑动轮播切换效果 jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码 jQuery带缩略图的焦点图代码_带标题的焦点图代码 jquery图片轮播插件带小缩略图片的焦点图切换效果代码 原生js图片插件缩略图片控制大图淡出淡进切换支持图片轮

10款基于jQuery的图片滑块焦点图插件

1.Material UI – Material Design CSS 框架 Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点.Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 J

17种常用的jQuery全屏焦点图代码

jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 jquery html5步步高vivo官网全屏焦点图片动画效果代码 jquery带左右按钮的全屏焦点图片切换代码 jQuery.skipper全屏响应式图片幻灯片轮播切换代码 modernizr html

9种网页Flash焦点图和jQuery焦点图幻灯片

jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的jQuery网页焦点图幻灯片 css3 jQuery轮播焦点图幻灯片 html5网页图片左右滑动焦点图

Jquery幻灯片焦点图插件

兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果. 下载

超炫酷的jQuery轮播焦点图 底部带切换缩略图

详细内容请点击 前面我们刚刚分享过一款jQuery/HTML5响应式焦点图动画应用,效果非常炫酷.这次我们再来分享一款基于jQuery的图片轮播焦点图,这款jQuery焦点图的特点是整个图片播放器是宽屏的效果,并且在焦点图底部有一排可以滑动的缩略图,点击缩略图可以快速跳转到相应的图片.  在线演示源码下载 学习来源:http://www.html5tricks.com/jquery-cool-image-slider-thumb.html 更多html5内容请点击

基于jQuery右侧带缩略图导航的焦点图

今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可实现图片的上下切换动画. 在线预览   源码下载 实现的代码. html代码: <div id="example5" class="slider-pro"> <div class="sp-slides"> <div cl

android webview 通过html5播放在线视频 切换大屏

1.添加网络访问权限 <uses-permission android:name="android.permission.INTERNET" /> 2.webview添加全屏支持 developer官方文档关于html5支持视频播放描述如下:In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set