文章目录
概要
通过jquery.tools.min.js实现视频缩略图轮播，点击放大播放
效果图：
引入依赖
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
index.js如下：
$(function(){
$(".b1").scrollable({
size:6,
items:".b1 ul",
loop:true,
prev:".arr_l",
next:".arr_r"
});
var io=0;
$(function(){
$(".b1 li").click(function(){
$(".bpic").empty();
$(".bpic").fadeTo("medium", 0.5);
$("div",this).clone().appendTo($(".bpic"));
$(".bpic").fadeTo("medium", 1);
});
$(".b1 li:eq(0)").click();
io=1;
setInterval(function(){//定时器可以不加，每隔6s就会自动切换下一个
$(".b1 li:eq("+io+")").click();
io++;
if(io>=$(".b1 li").length){
io=0
}
},6000);
});
$(".b1 li").mousedown(function(){
io=$(this).prevAll().length +1
});
})
html完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<div class="wrap">
<!-- 注意： 以下内容最外层的div要加position:relative，宽高都是100% -->
<div class="bpic" style="opacity:1;"></div>
<a class="arr_l png disabled"></a>
<div class="b1 scroll">
<ul style="left:0px;">
<li class="active">
<video src="./test.mp4" width="100" height="70"></video> <ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340px"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
<li>
<video src="./test.mp4" width="100" height="70"></video><ins></ins>
<div><video src="./test.mp4" controls="controls" width="100%" height="340"></video></div>
</li>
</ul>
</div>
<a class="arr_r png"></a>
<ins class="nm"></ins>
</div>
<!-- 引用js -->
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
index.css
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
border: 0;
list-style: none;
}
body {
overflow-x: hidden;
}
/* wrap */
.wrap {
width: 50%;
height: 60vh;
position: relative;
margin: 0 auto;
}
.scroll {
position: relative;
overflow: hidden;
}
.scroll ul {
position: absolute;
width: 20000em;
}
.scroll ul li {
float: left;
}
.bpic,
ins.nm {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
ins.nm {
height: 89px;
background-color: rgba(0, 0, 0, .6);
top: 355px;
filter: alpha(opacity=60);
opacity: 0.6;
}
.b1 {
width: 88%;
height: 66px;
position: absolute;
top: 366px;
left: 37px;
z-index: 1;
}
.b1 li,
.b1 li ins {
width: 100px;
height: 70px;
position: relative;
}
.b1 li {
margin-right: 6px;
cursor: pointer;
}
.b1 li div {
display: none;
}
.b1 li img {
border: 5px solid #fff;
width: 135px;
height: 56px;
}
.b1 li.active img {
border: none;
width: 129px;
margin: 8px;
height: 50px;
}
.b1 li.active ins {
background: url(../images/ico_2.gif) no-repeat;
background-size: 100% 100%;
position: absolute;
display: block;
top: 0;
left: 0;
filter: alpha(opacity=47);
opacity: 0.47;
}
a.arr_l,
a.arr_r {
background: url(../images/arr.png) no-repeat;
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 386px;
left: 10px;
z-index: 1;
cursor: pointer;
}
a.arr_r {
left: 95%;
background-position: right 0;
}
a.arr_l:hover,
ul.page li a.p:hover,
a.pv:hover {
background-position: 0 bottom;
}
a.arr_r:hover,
ul.page li a.n:hover,
a.nv:hover {
background-position: right bottom;
}
video {
background-color: rgba(0, 0, 0, .5);
}```