<div class="modal" >
<div class="modal-container" >
<div class="video-panel">
<video id="video" loop>
<source src="aa.mp4" >
</video>
</div>
<div class="video-footer">
<h1>
<!-- 「SINOSTAGE舞邦」Apple 编舞创意视频 我和我的祖国 -->
</h1>
</div>
<div class="video_paging">
<div class="paging_tools">
<span class="prev"> ◀ 上一页</span>
<span class="close"></span>
<span class="next">下一页 ▶ </span>
</div>
</div>
</div>
</div>
<script >
$(".acti").attr("onclick","");
// 关闭按钮
var num
$(".close").click(function () {
$(".modal").hide(10)
document.getElementById("video").pause();
})
// 播放逻辑
$(".a").click(function (index) {
// console.log($(this).find(".span").text())
num=$(this).index()
console.log(num)
$(".modal").show()
var dizhi=$(this).find(".span").text()
var dizhitit=$(this).find(".aa").text()
$(".video-footer h1").text(dizhitit)
$("video").attr("src",dizhi)
$("video").attr("data",num+1)
document.getElementById("video").play();
})
// 下一个
$(".next").click(function () {
index=parseInt( $("video").attr("data"))+1
$("video").attr("data",index)
next=$(".a:eq("+index+")").find(".span").text()
nexttitle=$(".a:eq("+index+")").find(".aa").text()
console.log(index)
$(".video-footer h1").text(nexttitle)
$("video").attr("src",next)
document.getElementById("video").play();
if (index>$(".a").length-2) {
$(this).hide()
}
$(".prev").show()
})
// 上一个
$(".prev").click(function () {
index=parseInt( $("video").attr("data"))-1
$("video").attr("data",index)
prev=$(".a:eq("+index+")").find(".span").text()
prevtitle=$(".a:eq("+index+")").find(".aa").text()
console.log(index)
$(".video-footer h1").text(prevtitle)
$("video").attr("src",prev)
document.getElementById("video").play();
if (index<2) {
$(this).hide()
}
$(".next").show()
})
</script>
首先有一个none的 弹出层
当用户点击 图片 弹出层出来>>获取图片的index(),拿到关于这个图片的标题，和视频地址
然后让视频play（）
当点击下一个 idnex+1 赋值给 标题 和视频地址 play（），pause（）
上一个也是
当index>长度的时候 结束none
<0 隐藏