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

来源：互联网发布：ip切换软件编辑：程序博客网时间：2024/04/24 21:19

前段时间，有个同事问及有没有现成的播放器拿过来他们项目要用；要求：支持文字播放，且有明显的内容轮放效果等；听他讲后，感觉貌似大型车站的时刻表一样的效果。之前用的都是图片幻灯效果，文字也就是跑马灯；没有既支持图片又支持文字的这种轮放器；今天空闲时间浏览网页时，看到有个站点主页有类似效果（只是播放图片）；估计是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~