<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 隱藏