前端JS特效第38集：jQuery视频轮播-CSDN博客

本文链接：https://blog.csdn.net/2401_85903333/article/details/139999680

jQuery视频轮播，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>jquery视频轮播</title>
    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="videoLunbo.js"></script>
    <link rel="stylesheet" href="videoLunbo.css">
  </head>
  <body>
    <div class="Lunbo-video">
      <div class="Lunbo-video-title">
        <h1 class="Lunbo-video-h3 text-center">说点什么</h1>
      </div>
      <div class="Lunbo-video-cont">
        <div class="video">
          <div> <img src="left.png" class="Lunbobutton"> </div>
          <div>
            <!-- 这里改视频源 -->
            <ul>
              <li class="video1"><div> <video id="v001" onmouseover="mouseOver1()" onmouseout="mouseOut1()" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4" preload="auto" poster="t1.png"></video> </div> </li>
              <li class="video2"><div> <video id="v002" onmouseover="mouseOver2()" onmouseout="mouseOut2()" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4" preload="auto" poster="t2.png"></video> </div> </li>
              <li class="video3"><div> <video id="v003" onmouseover="mouseOver3()" onmouseout="mouseOut3()" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4" preload="auto" poster="t3.png"></video> </div> </li>
              <li class="video4"><div> <video id="v004" onmouseover="mouseOver4()" onmouseout="mouseOut4()" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4" preload="auto" poster="t4.png"></video> </div> </li>
              <li class="video5"><div> <video id="v005" onmouseover="mouseOver5()" onmouseout="mouseOut5()" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4" preload="auto" poster="t1.png"></video> </div> </li>
            </ul>
          </div>
          <div><img src="right.png" class="Lunbobutton"></div>
        </div>
      </div>
    </div>
  </body>
</html>

全部代码：jQuery视频轮播