视频展示效果实例

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font: 12px/19px Arial, Helvetica, sans-serif;
            color: #666;
        }
        form div
        {
            margin: 5px 0;
        }
        .int label
        {
            float: left;
            width: 100px;
            text-align: right;
        }
        .int input
        {
            padding: 1px 1px;
            border: 1px solid #ccc;
            height: 16px;
        }
        .sub
        {
            padding-left: 100px;
        }
        .sub input
        {
            margin-right: 10px;
        }
        .formtips
        {
            width: 200px;
            margin: 2px;
            padding: 2px;
        }
        .onError
        {
            background: #FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
            padding-left: 25px;
        }
        .onSuccess
        {
            background: #E9FBEB url(../img/reg4.gif) no-repeat 0 center;
            padding-left: 25px;
        }
        .high
        {
            color: red;
        }
    </style>

    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            var page = 1; //初始页
            var i = 4; //一页有多少个项
            //下一页按钮
            $("span.next").click(function() {
                var parent = $(this).parents("div.v_show");
                var v_show = parent.find("div.v_content_list"); //找到“视频内容展示区域”
                var v_content = parent.find("div.v_content"); //找到“视频内容展示区域”外围的DIV元素
                var v_width = v_content.width(); //控制left样式
                var len = v_show.find("li").length; //li的个数

                var page_count = Math.ceil(len / i); //最小页数量
                //alert(page_count);
                if (!v_show.is(":animated")) {//当动画停止时再执行
                    if (page == page_count) {//当到了最后一页，返回
                        v_show.animate({ left: '0px' }, "slow");
                        page = 1;
                    } else {
                        v_show.animate({ left: '-=' + v_width }, "slow");
                        page++;
                    }
                }
                parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
            });
            $("span.prev").click(function() {
                var parent = $(this).parents("div.v_show");
                var v_show = parent.find("div.v_content_list"); //找到“视频内容展示区域”
                var v_content = parent.find("div.v_content"); //找到“视频内容展示区域”外围的DIV元素
                var v_width = v_content.width(); //控制left样式
                var len = v_show.find("li").length; //li的个数

                var page_count = Math.ceil(len / i); //最小页数量
                //alert(page_count);
                if (!v_show.is(":animated")) {//当动画停止时再执行
                    if (page == 1) {//当到了最后一页，返回
                        v_show.animate({ left: '-=' + v_width * (page_count - 1) }, "slow");
                        page = page_count;
                    } else {
                        v_show.animate({ left: '+=' + v_width }, "slow");
                        page--;
                    }
                }
                parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
            });
        });
    
    </script>

</head>
<body>
    <div class="v_show">
        <div class="v_caption">
            <%--头部标题，按钮等--%>
            <h2 class="cartoon" title="卡通动漫">
                卡通动漫</h2>
            <div class="highlight_tip">
                <span class="current">1</span><span>2</span><span>3</span><span>4</span>
            </div>
            <div class="change_btn">
                <span class="prev">上一页</span> <span class="next">下一页</span>
            </div>
            <em><a href="#">更多>></a></em>
        </div>
        <div class="v_content">
            <div class="v_content_list">
                <%--视频内容展示区域--%>
                <ul>
                    <li><a href="#">
                        <img src="img/01.jpg" alt="海贼王" /></a><h4>
                            <a href="#">海贼王</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/01.jpg" alt="海贼王" /></a><h4>
                            <a href="#">海贼王</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/01.jpg" alt="海贼王" /></a><h4>
                            <a href="#">海贼王</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/01.jpg" alt="海贼王" /></a><h4>
                            <a href="#">海贼王</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
                            <a href="#">哆啦A梦</a></h4>
                        <span>播放:<em>33,326</em></span></li>
                    <li><a href="#">
                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
                            <a href="#">哆啦A梦</a></h4>
                        <span>播放:<em>33,326</em></span></li>
                    <li><a href="#">
                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
                            <a href="#">哆啦A梦</a></h4>
                        <span>播放:<em>33,326</em></span></li>
                    <li><a href="#">
                        <img src="img/02.jpg" alt="哆啦A梦" /></a><h4>
                            <a href="#">哆啦A梦</a></h4>
                        <span>播放:<em>33,326</em></span></li>
                    <li><a href="#">
                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>
                            <a href="#">火影忍者</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>
                            <a href="#">火影忍者</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>
                            <a href="#">火影忍者</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/03.jpg" alt="火影忍者" /></a><h4>
                            <a href="#">火影忍者</a></h4>
                        <span>播放:<em>28,276</em></span></li>
                    <li><a href="#">
                        <img src="img/04.jpg" alt="龙珠" /></a><h4>
                            <a href="#">龙珠</a></h4>
                        <span>播放 <em>57,865</em></span></li>
                    <li><a href="#">
                        <img src="img/04.jpg" alt="龙珠" /></a><h4>
                            <a href="#">龙珠</a></h4>
                        <span>播放 <em>57,865</em></span></li>
                    <li><a href="#">
                        <img src="img/04.jpg" alt="龙珠" /></a><h4>
                            <a href="#">龙珠</a></h4>
                        <span>播放 <em>57,865</em></span></li>
                    <li><a href="#">
                        <img src="img/04.jpg" alt="龙珠" /></a><h4>
                            <a href="#">龙珠</a></h4>
                        <span>播放 <em>57,865</em></span></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
posted on 2013-01-18 11:36 .NET每天一小步阅读(141) 评论(0) 收藏举报
刷新页面返回顶部
视频展示效果实例

公告
