前端：一款Web轮放器 - 支持文字、图片传送带式轮放

最新推荐文章于 2023-12-27 02:11:38 发布

奋斗的小壁虎

最新推荐文章于 2023-12-27 02:11:38 发布

阅读量722

点赞数

分类专栏： [03]Web前端文章标签： web class div stylesheet server xhtml

本文链接：https://blog.csdn.net/chz_cslg/article/details/6865279

版权

[03]Web前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

前段时间，有个同事问及有没有现成的播放器拿过来他们项目要用；要求：支持文字播放，且有明显的内容轮放效果等；听他讲后，感觉貌似大型车站的时刻表一样的效果。之前用的都是图片幻灯效果，文字也就是跑马灯；没有既支持图片又支持文字的这种轮放器；今天空闲时间浏览网页时，看到有个站点主页有类似效果（只是播放图片）；估计是flash做的；但打开源代码时，不是的；用的javascript做的效果。琢磨着，研究一下估计可以支持文字。网页保存下来分析研究一下，果然是可以的。现将整理后代码贴出来供大家用时可以参考一下。

说明：此前端代码用到 jquery-1.4.2.min.js 文件。在此基础上人家写了个js文件 - player.js；所以页头引用时要注意先后。（后者js文件代码有点长有点乱就不贴出来了，可以到此处下载demo源码）。

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="demo._Default" %>

<!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 runat="server">
    <title>播放器demo</title>
    <link href="demo.css" rel="stylesheet" type="text/css" />

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

    <script src="player.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="pageContent">
            <div id="focus">
                <div id="imgPlay">
                    <ul id="actor" class="imgs">
                        <li>
                            <div style="width: 590px;" runat="server" id="contentContainer">
                            </div>
                        </li>
                        <li>
                            <img title="" src="2011_07_15_143134671A.jpg" /></li>
                        <li>
                            <img title="" src="2011_07_15_180753759A.jpg" /></li>
                        <li>
                            <img title="" src="2011_08_04_212106351A.jpg" /></li>
                        <li>
                            <img title="" src="2011_07_15_093530828A.jpg" /></li>
                    </ul>
                    <div class="num">
                        <p class="lc">
                        </p>
                        <p class="mc">
                        </p>
                        <p class="rc">
                        </p>
                    </div>
                    <div id="numInner" class="num">
                    </div>
                    <div class="prev">
                        上一张</div>
                    <div class="next">
                        下一张</div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

后端代码：（只是为动态添加轮放内容：文字或者图片提供一个思路）

protected void Page_Load(object sender, EventArgs e)
        {
            for (int i = 0; i < 15; i++)
            {
                for (int j = 0; j < 21; j++)
                {
                    this.contentContainer.InnerHtml += "苏州  ";                    
                }
                this.contentContainer.InnerHtml += "<br />";
            }
        }

CSS 样式主要部分：

#pageContent {
	WIDTH: 660px; FLOAT: left
}

#focus {
	PADDING-BOTTOM: 14px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(focus_bg.jpg) no-repeat left top; PADDING-TOP: 14px
}

#imgPlay {
	POSITION: relative; MARGIN: 8px auto; WIDTH: 590px; ZOOM: 1; HEIGHT: 260px; OVERFLOW: hidden
}
#imgPlay .imgs IMG {
	WIDTH: 590px; HEIGHT: 260px
}
#imgPlay .imgs LI {
	POSITION: relative; FLOAT: left
}
#imgPlay .imgs {
	WIDTH: 3540px
}
#imgPlay .prev {
	POSITION: absolute; TEXT-INDENT: -9999px; WIDTH: 46px; BACKGROUND: url(arrow_left.png) no-repeat 0px 0px; HEIGHT: 81px; TOP: 110px; CURSOR: pointer; LEFT: 0px; _background: none
}
#imgPlay .next {
	POSITION: absolute; TEXT-INDENT: -9999px; WIDTH: 46px; BACKGROUND: url(arrow_right.png) no-repeat 0px 0px; HEIGHT: 81px; TOP: 110px; CURSOR: pointer; LEFT: 0px; _background: none
}
#imgPlay .next {
	BACKGROUND-POSITION: right 0px; RIGHT: 0px; LEFT: auto
}
#imgPlay .num {
	POSITION: absolute; DISPLAY: inline; HEIGHT: 19px; TOP: 230px; LEFT: 400px
}
#imgPlay .num SPAN {
	LINE-HEIGHT: 0; MARGIN: 0px 2px; WIDTH: 14px; DISPLAY: inline-block; BACKGROUND: url(imgPlayer.png) no-repeat -19px -83px; HEIGHT: 13px; OVERFLOW: hidden; CURSOR: pointer; _background: none
}
#imgPlay .num SPAN.on {
	BACKGROUND-POSITION: 1px -83px
}
#imgPlay #numInner {
	POSITION: absolute; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; TOP: 230px; PADDING-TOP: 3px
}

CSS 样式其它部分：

HTML {
	HEIGHT: 100%; MAX-HEIGHT: 100%
}
BODY {
	HEIGHT: 100%; MAX-HEIGHT: 100%
}
BODY {
	FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12px
}
BODY {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DD {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DT {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
FORM {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H1 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H2 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H3 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H4 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H5 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H6 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
OL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
P {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
IMG {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
LI {
	LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none
}
INPUT {
	FONT-SIZE: 12px
}
TD {
	FONT-SIZE: 12px
}
TH {
	FONT-SIZE: 12px
}
A:visited {
	TEXT-DECORATION: none
}
A:active {
	TEXT-DECORATION: none
}
A:link {
	TEXT-DECORATION: none
}
A:hover {
	TEXT-DECORATION: underline
}
.clear {
	CLEAR: both
}

就这些了，如果童鞋们有更好的demo；能共享的一下；有疑问或者不妥的地方，请批评指正、共同探讨哦！O(∩_∩)O~