以下是 jquery标签控制多个视频播放切换特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
</head>
<style type="text/css">
.box_x3{width:300px;margin:40px auto 0 auto;}
#box3 h4{display:block; width:160px; height:24px; color:#900; float:left; line-height:25px; margin-left:5px;}
.box_x3 #box3 h4{width:78px;}
#video_content li{display:none; list-style:none;}
#video_content .cur{display:block; margin-left:-20px;}
#video_btn {float:right;padding-right:15px;}
#video_btn li{float:left;margin-right:2px;height:24px;line-height:24px;padding-top:1px; list-style:none;}
#video_btn li a{padding:2px 3px;background: none repeat scroll 0 0 #DEDEDE;border:1px #999999 solid; text-decoration:none;}
#video_btn li a:hover{border:1px #ff0000 solid;}
#video_btn li.cur a{border:1px #ff0000 solid;color:#ff0000;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#video_btn li").click(function(){
index=$(this).index("#video_btn li");
$("#video_btn li").removeClass("cur");
$(this).addClass("cur");
$("#video_content li").removeClass("cur");
$("#video_content li:eq("+index+")").addClass("cur");
});
})
</script>
<body>
<div class="box_x3">
<div id="box3">
<div class="box1_q"></div>
<h4>最新视频</h4>
<ul id="video_btn">
<li class="cur"><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
</ul>
</div>
<ul id="video_content">
<li class="cur">
<object width="240" align="middle" height="180" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="http://player.youku.com/player.php/sid/XNTk5MjcxODk2/v.swf" name="movie">
<param value="high" name="quality">
<param value="always" name="allowScriptAccess">
<param value="internal" name="allowNetworking">
<param value="transparent" name="wmode">
<embed width="240" height="180" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allownetworking="internal" allowscriptaccess="always" quality="high" src="http://player.youku.com/player.php/sid/XNTk5MjcxODk2/v.swf">
</object>
</li>
<li>
<object width="240" align="middle" height="180" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="http://player.youku.com/player.php/sid/XNjAxNjY1OTg4/v.swf" name="movie">
<param value="high" name="quality">
<param value="always" name="allowScriptAccess">
<param value="internal" name="allowNetworking">
<param value="transparent" name="wmode">
<embed width="240" height="180" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allownetworking="internal" allowscriptaccess="always" quality="high" src="http://player.youku.com/player.php/sid/XNjAxNjY1OTg4/v.swf">
</object>
</li>
<li>
<object width="240" align="middle" height="180" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="http://player.youku.com/player.php/sid/XNjAyNTI2MzAw/v.swf" name="movie">
<param value="high" name="quality">
<param value="always" name="allowScriptAccess">
<param value="internal" name="allowNetworking">
<param value="transparent" name="wmode">
<embed width="240" height="180" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allownetworking="internal" allowscriptaccess="always" quality="high" src="http://player.youku.com/player.php/sid/XNjAyNTI2MzAw/v.swf">
</object>
</li>
</ul>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
