场景或者游戏切入走马灯播放中奖信息或者一些广告
html代码：1
2
3
4
5
6
7
8
9<div id="list" class="center">
<div class="awardParent">
<!-- <div>181****2031获得一等奖</div>
<div>182****2032获得二等奖</div>
<div>183****2033获得三等奖</div>
<div>184****2034获得四等奖</div>
<div>185****2035获得一等奖</div> -->
</div>
</div>
css代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20#list{
position: absolute;
z-index: 1000;
width:400px;
height:40px;
overflow:hidden;
left: 50%;
top: 90%;
background-color: rgba(200, 200, 200, 0.7);
}
#list div div{
line-height:40px;
text-align:center;
}
#list div div{
width:400px;
height:40px;
float:left;
font-size: 20px;
}
javascript代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146//主要的滚动函数
//如果滚动的效果正好是需要的效果
//那么你只需要直接调用这个函数即可
var moveTag=function(obj){
var _this = this;
_this.speed = 10;//移动的速度
_this.space = 10 * _this.speed;//移动间隔的时间
obj.scrollLeft=0;//初始化滚动的位置(主要是考虑到需要兼容FF)
var divList = obj.getElementsByTagName("DIV");
var obj2 = new Object();//包含所有滚动列的div
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj){
obj2=divList[i];
break;
}
}
//得到需要滚动的所有列
//divList循环两次的目的是为了不让样式名称影响滚动代码
//也就是尽可能的减少滚动代码与样式名称的耦合
var cellCount = 0;
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2){
cellCount++;
_this.cellList.push(divList[i]);//需要滚动的所有列
}
}
_this.resetCellList=function(){
//这个函数主要是为了让滚动不间断
//在每次滚动到终点的时候需要使用
//将已经滚动过的列移到当前列之后
for(var i=0;i<_this.cellList.length-1;i++){
obj2.removeChild(_this.cellList[i]);
obj2.appendChild(_this.cellList[i]);
}
//重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
_this.resetForMoveRight=function(){
//这个函数主要是为了让滚动不间断
//与resetCellList的区别是这个函数是为了向右不间断滚动使用的
//在每次滚动到起点的时候需要使用
//将当前列之后的所有列移动到当前列之前
if(_this.cellList.length>0){
for(var i=_this.cellList.length-1;i>0;i--){
obj2.removeChild(_this.cellList[i]);
obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]);
}
}
//重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
//alert(_this.cellList.length);
obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px";
//
//alert(_this.endScroll);
var cellScroll = obj.offsetWidth;//每次滚动需要滚动多少距离
var endScroll = obj2.offsetWidth - cellScroll;//计算滚动条的终点位置
//alert(_this.cellScroll);
//
_this.moveLength = cellScroll;//初始化移动偏量,为0的时候,在页面加载完毕之后将会立即移动;等于_this.cellScroll表示延迟一会再开始执行
_this.scrollEnd = false;
_this.scrollTimes = 0;
//休息一会儿
_this.sleep=function(){
_this.scrollTimes++;
if(_this.scrollTimes>=_this.space){
_this.scrollTimes=0;
_this.moveLength=0;
}
};
_this.moveStart = true;//是否开始移动
_this.isMoveLeft = true;//是否向左移动
_this.move=function(){
// obj.onmouseover=function(){
// _this.moveStart=false;
// };
// obj.onmouseout=function(){
// _this.moveStart=true;
// };
//重新设定cellList
if(obj.scrollLeft>=endScroll && _this.isMoveLeft){//向左移动，并且已经移动到尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整
if(_this.cellList.length>0){
_this.resetCellList();//更新cellList
obj.scrollLeft=0;
}else{
_this.scrollEnd = true;
}
}else if(obj.scrollLeft<=0 && !_this.isMoveLeft){//向右移动，并且已经移动到尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;//调整
if(_this.cellList.length>0){
_this.resetForMoveRight();//更新cellList
obj.scrollLeft=endScroll;
}else{
_this.scrollEnd = false;
}
}
//
if(_this.scrollEnd){//向左移动
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft--;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
else{//向右移动
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft++;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
};
//自动
_this.start=function(){
setInterval(_this.move,_this.speed);
};
//右移动
_this.moveRight=function(){
_this.scrollEnd = true;//已经滚动到尽头
_this.isMoveLeft = false;//向右滚动
_this.scrollTimes=0;
};
//左移动
_this.moveLeft=function(){
_this.scrollEnd = false;//没有滚动到尽头
_this.isMoveLeft = true;//向左滚动
_this.scrollTimes=0;
};
};
var move=new moveTag(document.getElementById("list"));
move.start();
move.speed=10;//滚动的速度,默认为10
//move.space=0;//滚动间隔时间,默认为滚动速度 * 16