芒果TV视频点播器

最新推荐文章于 2021-02-06 21:39:48 发布
转载最新推荐文章于 2021-02-06 21:39:48 发布 · 397 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/shadowolf/blog/843228
文章标签：
#python #java #javascript #ViewUI
2019独角兽企业重金招聘Python工程师标准>>>
<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
        <title>芒果TV视频点播器---eagle天堂盲鹰</title>  
        <meta name="Keywords" content="关键字,关键字">  
        <meta name="description" content="">  
        <style type="text/css">  
            *{margin:0px;padding:0px;}  
            body{font-size:12px;font-family:"微软雅黑";color:#666;}

            /\*start web\*/  
            .web{width:100%;height:503px;position:relative;}  
            .web .con{width:100%;height:503px;background:#000;overflow:hidden;}  
            .web .con ul li{list-style:none;width:100%;height:503px;}  
            .web .con ul li a{width:100%;height:503px;background:url("images/play.png") no-repeat center;display:none;}  
            .web .menu{width:797px;height:55px;position:absolute;bottom:25px;left:50%;margin-left:-398px;}  
            .web .menu ul li{list-style:none;border:2px solid #FFF;width:90px;height:51px;float:left;margin-left:5px;cursor:pointer;}  
            .web .menu ul li.bor{border-color:#F06000;}  
            /\*web end\*/  
        </style>  
    </head>  
    <body>

        <!--start web-->  
        <div class="web">  
            <div class="con">  
                <ul>  
                    <li style="background:url('images/1.jpg') center;"><a href="#"></a></li>  
                    <li style="background:url('images/2.jpg') center;"><a href="#"></a></li>  
                    <li style="background:url('images/3.jpg') center;"><a href="#"></a></li>  
                    <li style="background:url('images/4.jpg') center;"><a href="#"></a></li>  
                    <li style="background:url('images/5.jpg') center;"><a href="#"></a></li>  
                    <li style="background:url('images/6.jpg') center;"><a href="#"></a></li>  
                    <li style="background:url('images/7.jpg') center;"><a href="#"></a></li>  
                    <li style="background:url('images/8.jpg') center;"><a href="#"></a></li>  
                </ul>  
            </div>  
            <div class="menu">  
                <ul>  
                    <li class="bor"><img src="images/nav1.jpg" width="90" height="51" alt=""/></li>  
                    <li><img src="images/nav2.jpg" width="90" height="51" alt=""/></li>  
                    <li><img src="images/nav3.jpg" width="90" height="51" alt=""/></li>  
                    <li><img src="images/nav4.jpg" width="90" height="51" alt=""/></li>  
                    <li><img src="images/nav5.jpg" width="90" height="51" alt=""/></li>  
                    <li><img src="images/nav6.jpg" width="90" height="51" alt=""/></li>  
                    <li><img src="images/nav7.jpg" width="90" height="51" alt=""/></li>  
                    <li><img src="images/nav8.jpg" width="90" height="51" alt=""/></li>  
                </ul>  
            </div>  
        </div>  
        <!--web end-->

        <script type="text/javascript" src="js/jquery.js"></script>  
        <script type="text/javascript">  
            var i = 0;  
            var time = 0;  
            $(".web .con").hover(function() {  
                $(".web .con ul li a").css("display", "block");  
            }, function() {  
                $(".web .con ul li a").css("display", "none");  
            });  
            $(".web .con ul li a").hover(function() {  
                clearInterval(time);  
            }, function() {  
                time = setInterval("auto()", 3000);  
            });  
            $(".web .menu ul li").hover(function() {  
                $(this).addClass("bor").siblings().removeClass("bor");  
                i = $(this).index();  
                $(".web .con ul li").eq(i).fadeIn(300).siblings().fadeOut(300);  
            });  
            function auto() {  
                i++;  
                if (i > 7) {  
                    i = 0;  
                }  
                $(".web .menu ul li").eq(i).addClass("bor").siblings().removeClass("bor");  
                $(".web .con ul li").eq(i).fadeIn(300).siblings().fadeOut(300);  
            }  
            time = setInterval("auto()", 3000);  
        </script>  
    </body>  
</html>
转载于:https://my.oschina.net/shadowolf/blog/843228