HTML
<!DOCTYPE html>
<html">
<head>
<!-- 防止IE8,7进入怪异模式 -->
<meta http-equiv="Content-Type" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery列表带拖动条点击切换视频特效</title>
<!-- js通用样式 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- js通用样式 -->
<!-- 滚动条主要样式 -->
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<!-- 滚动条主要样式 -->
<style type="text/css">
/*格式化样式*/
body {margin: 0;padding: 0;font-family:Microsoft YaHei!important;background-color: #F5F5F5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a{text-decoration: none;outline: none;color:#444;}
a:visited{text-decoration: none;}
a:hover{cursor: pointer;text-decoration: none; color:#3C97D6;}
a:focus{-moz-outline-style: none;text-decoration: none;}
img{border: 0;}
.clear{clear: both;}
/*格式化样式*/
/*播放器样式*/
.video_player{height:393px;}
.video_list_area{width: 700px;}
ul.video_list{margin: 7px 0px 0px 0;height: 107px; list-style:none;border-bottom:10px dashed #dcdcdc;}
ul.video_list li{float: left;font-size: 14px;font-weight: bold;line-height: 24px;}
ul.video_list li a{display:inline-block;padding: 14px 15px;margin-right:7px;width: 140px;height:72px;color: #fff;background-color:blue;background-color:rgba(0,152,50,0.3);}
ul.video_list li.last a{margin-right:0;}
ul.video_list li a:hover,ul.video_list li a.on{color: #fff;background-color: #c12e2e; background-color:rgba(0,152,50,0.1);}
#ascrail2000-hr div{margin-left:0;}
.center{width: 700px;margin: 20px auto;}
/*播放器样式*/
</style>
<!--- iframe切换停止播放js -->
<script type="text/javascript">
$(function() {
var iframe = $("div.video_player iframe");//播放页面
$('ul.video_list li a').click(function(){
iframe.attr("src",$(this).attr("name"));//更改iframe src
$('ul.video_list li a').removeClass('on');
$(this).addClass('on');//给点击的元素添加正在播放标识
});
});
</script>
<!-- iframe切换停止播放js -->
</head>
<body background=bg.jpg style=background-repeat:no-repeat;background-size:100% 100%;>
<div class="center">
<!-- 播放器 -->
<div class="video_player">
<iframe src="" width="700px" height="393px" frameborder="0" cols="50%,50%" scrolling="No"></iframe>
</div>
<div class="dec_10 clearborder">
<div class="video_list_area">
<ul class="video_list">
<li><a class="on" name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\1.mp4">[金庸武侠]【倚天屠龙记】刀剑如梦&粤语版-周华健</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\2.mp4">[金庸武侠]【倚天屠龙记】刀剑如梦-周华健</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\3.mp4">[金庸武侠]【天龙八部】难念的经-周华健</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\4.mp4">[金庸武侠]【83射雕英雄传】铁血丹心-甄妮</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\5.mp4">[金庸武侠]【笑傲江湖之东方不败】花絮-李连杰</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\6.mp4">[金庸武侠]【金庸群侠传】经典怀旧集锦</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\7.mp4">[金庸武侠]【雪山飞狐主题曲】爱你痛到不知痛-张学友</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\8.mp4">[金庸武侠]【侠客行】纵横江湖</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\9.mp4">[金庸武侠]【92射雕英雄传片头曲】神话情话-周华健&齐豫</a></li>
<li><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\10.mp4">[金庸武侠]【92射雕英雄传片尾曲】归去来</a></li>
<li class="last"><a name="C:\Users\heich\Desktop\视频点播网站\播放器\mp4\92.mp4">[金庸武侠]【射雕英雄传92版】张智霖&朱茵</a></li>
</ul>
</div>
</div>
<!-- 播放器 -->
</div>
<!-- 美化滚动条js -->
<script type="text/javascript">
var video_list_lenght=$("ul.video_list li").length;
$("ul.video_list").css("width",$("ul.video_list li").width()*video_list_lenght-7);// 减去margin-right的7px长度
$(".video_list_area").niceScroll({
cursorcolor:" #red", //#FF6666滚动条光标颜色
cursoropacitymax:1, //改变不透明度，光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior:false, //使光标拖动滚动像在台式电脑触摸设备
autohidemode:false, //是否隐藏滚动条
cursorwidth:"10px", //像素光标的宽度
cursorborder:"0", //游标边框css定义
cursorborderradius:"0px" //以像素为光标边界半径
});
</script>
<!-- 美化滚动条js -->
<!-- 注意：jquery.nicescroll.js文件里的（rtlmode: "auto"属性。一般的滚动条都是垂直方向所以对此属性可能不注意。改为rtlmode：false,即可实现水平滚动。次文件已更改） -->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p></p>
<p><a href="http://www.blacksss.info/" target="_blank"><b><font color='white'size='4'>法 拉 驴 出 品</font></b></a></p>
</div>
</body>
</html>
标题
展示
