实现文字轮播的效果--基于MSclass插件

如题。

        最近这个项目需要实现类似于好乐买的这种中奖名单的效果：

        http://www.okbuy.com/act/newyear?from=0100507652c0d4f6e43b0#006

        经过我的一番努力，最终终于让我找到这个非常牛逼的插件：MSclass.

        项目主页: http://popub.net:81/script/MSClass.html

        最终我实现的效果如下：这个链接可能会失效

        http://img3.taodiantong.cn/v51259/cuxiao/2014-01/kuanian2/index.html#f0

        各位可以通过我的教程来使用我的这个效果：

下面贴上我的实现代码，这期中可能会包含一些后台的代码，我会尽量删掉的。不好意思。

1.依赖：

<!--获奖名单轮播-->
<script src="../res/MSClass.js" type="text/javascript"></script>
<script> new Marquee(["hottitle","ulid"],0,2,270,160,150,0,0);//这里设置的是第二，三，四个参数，分别是滑动的宽度，高度，速度</script>

2.HTML：

<!--获奖名单循环展示-->
<div class="list_top">
     <p class="title">已有<span id="numberTotal" class="number">3000</span> 个幸运儿中奖</p>
     <div id="hottitle" class="hot">
          <ul id="ulid">
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
              <li><span class='name'>TEST123</span><span class='gift-type'>获得100元优惠劵</span></li>
          </ul>
     </div>
</div>

3.CSS：

/*获奖名单轮播*/
.title{
	width:240px;
	height:40px;
	font-family:"微软雅黑";
	font-size:16px;
	font-weight:bold;
	border-bottom:#7b3a12 solid 1px;
	color:#7b3a12;
	text-align:center;
	line-height:40px;
	margin:0 auto;
}
.number{
	font-size:20px;
	color:#900;
	font-style:italic;
}
.list_top{ 
	width:265px;
	height:215px;
	overflow:hidden; 
	background:#FFF; 
	float:left;
	margin-top:20px;
	margin-left:7px;
}
.list_top .Empty{ 
	width:40px; 
	height:40px; 
	float:left;
}
.hot{ 
	width:255px;
	height:40px;
	margin-left:15px;
	margin-top:5px;
	margin-bottom:10px;
}
.hot ul{ 
	overflow:hidden; 
	margin:0;
	padding:0;
}
.hot ul li{	
	width:240px;
	height:20px; 
	float:left; 
	line-height:20px;
}
.name{ 
	color:#000; 
	font-size:10px;  
	font-family:"verdana"; 
	display:block; 
	float:left;
	width:120px; 
	height:20px; 
	overflow: hidden; 
}
.gift-type{
	color:#7b3a12; 
	font-size:10px;  
	font-family:"verdana"; 
	display:block; 
	float:left;
	width:120px; 
	height:20px;
}
/*抽奖位置css结束*/

这里就是我实现获奖名单轮播的效果。该js插件还可以使用很多其他的功能。具体请大家自己研究。