海量素材、源码、软件、教程、资源

实时更新,建站资源,各种源码、素材、软件、课程、资源,自由下载



  • 注册
  • 查看作者
  • jquery点击缩略图切换视频播放的视频切换焦点图效果代码

    一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器,每个缩图对应一个视频片段,视频电影站推荐使用。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jquery点击缩略图切换视频播放的视频切换焦点图效果丨小浩博客丨www.xhsay.com</title>
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
    .videobox{background:#ff6600;border:solid 5px #ff6600;width:408px;margin:30px auto 0 auto;}
    .video-img{width:408px;height:266px;overflow:hidden;}
    .video-list{height:78px;padding:15px 0 0 0;}
    .video-list li{width:78px;height:59px;overflow:hidden;position:relative;float:left;border:solid 2px #fff;margin:0 10px;cursor:pointer;}
    .video-list li .icon-video{position:absolute;left:22px;top:12px;width:33px;height:33px;z-index:99;}
    .video-list li.now .icon-video{display:none;}
    </style>
    </head>
    <body>
    <div class="videobox">
    <div class="video-img">
    <embed id="js_videoCon_1" class="js_videoCon"   src="" width="78" height="59">
    <img src="https://www.xhsay.com/imagesforcode/201505/icon-video.png" class="icon-video">
    </li>
    <li id="" width="78" height="59">
    <img src="https://www.xhsay.com/imagesforcode/201505/icon-video.png" class="icon-video">
    </li>
    <li id="https://img.phpx.cn/user_files/1/bbs/cai/04/video_2.jpg" width="78" height="59">
    <img src="https://www.xhsay.com/imagesforcode/201505/icon-video.png" class="icon-video">
    </li>
    <li id="https://img.phpx.cn/user_files/1/bbs/cai/04/video_2.jpg" width="78" height="59">
    <img src="https://www.xhsay.com/imagesforcode/201505/icon-video.png" class="icon-video">
    </li>
    </ul>
    </div>
    </div>
    <script type="text/javascript" src="https://www.xhsay.com/images/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    // 切换视频
    $(".video-list li").click(function(){
    var obj = $(this);
    var video_id = obj.attr("video");
    var path = obj.attr("id");
    var vid = obj.attr("vid");
    $(".js_videoCon").hide();
    $("#js_videoCon_"+vid).show();
    obj.addClass("now").siblings().removeClass("now");
    });
    });
    </script>
    </div>
    <div><br>
    </div>
    </body>
    </html>
    <br>所需js文件:<a href="https://www.xhsay.com/images/jquery-1.6.2.min.js" target=_blank>jquery-1.6.2.min.js</a><hr>
  • 0
  • 0
  • 0
  • 112
  • 请登录之后再进行评论

    登录
    聊天
    关注 1
    • 今日签到
    • 累计签到

    暂没有数据

  • 安逸
  • tcotu
  • an
    an
  • 发布
  • 任务
  • 动态
  • 到底部
  • 单栏布局 侧栏位置:
    关闭窗口
    下载海报