页面html代码
#pic_scroll { width:960px; height:130px; margin:0px auto;
background:url(../images/finance_scroll_pic.jpg) no-repeat}
#pic_scroll h2
{display:none;}
.scrollBox { float:right; width:860px; padding:0px
50px;}
.upOne a, .downOne a { display:block; width:18px; height:85px;
font-size:0px; line-height:0px; text-indent:999px; overflow:hidden;}
.upOne {
float:left; width:18px;padding:0px; margin-top:22px;display:inline;
background:url(../images/f_left_btn.jpg) no-repeat;}
.downOne { float:right;
padding:0px;margin-top:22px; display:inline;
background:url(../images/f_right_btn.jpg) no-repeat;}
.lsitCont { float:left;
width:820px; margin-top:3px; overflow:hidden;}
.scrollContId {
width:10000px;}
.scrollPic {float:left;}
.scrollPic ul { width:820px;
height:124px; overflow:hidden; margin:0px; padding:0px}
.scrollPic li {
float:left; width:131px; height:124px; margin-left:5px; display:inline;
background:url(../images/f_pic_bg.jpg) no-repeat;}
.scrollPic li:hover {
float:left; width:131px; height:124px; margin-left:5px; display:inline;
background:url(../images/f_pic_hover_bg.jpg) no-repeat;}
.scrollPic li a {
line-height:29px; display:block; width:131px; height:124px;
text-align:center;}
.scrollPic li a img { display:block; width:116px;
height:89px; margin:6px auto 0px auto; padding:1px; border:1px solid #ccc;}
<div class="w960 tm">
<div id="pic_scroll">
<div class="scrollBox">
<div class="upOne"><a
title="下一张" οnmοuseοut="ISL_StopDown()" οnmοuseup="ISL_StopDown()"
οnmοusedοwn="ISL_GoDown()"
href="javascript:;">下一张</a></div>
<div id="ISL_Cont"
class="lsitCont">
<div class="scrollContId">
<div id="List1" class="scrollPic">
<ul>
<li><a href="#"><img
src="images/f_pic_01.jpg" alt="牛根生">牛根生
</a></li>
<li><a href="#"><img
src="images/f_pic_01.jpg" alt="郎咸平">郎咸平</a></li>
<li><a href="#"><img src="images/f_pic_01.jpg"
alt="李学凌">李学凌</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="郎咸平">郎咸平</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="史玉柱">史玉柱</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="李学凌">李学凌</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="郎咸平">郎咸平</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="李学凌">李学凌</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="郎咸平">郎咸平</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="张大中">张大中</a></li>
</ul>
</div>
<div id="List2"
class="scrollPic">
<ul>
<li><a
href="#"><img src="images/f_pic_01.jpg" alt="牛根生">牛根生
</a></li>
<li><a href="#"><img
src="images/f_pic_01.jpg" alt="郎咸平">郎咸平</a></li>
<li><a href="#"><img src="images/f_pic_01.jpg"
alt="李学凌">李学凌</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="郎咸平">郎咸平</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="史玉柱">史玉柱</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="李学凌">李学凌</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="郎咸平">郎咸平</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="李学凌">李学凌</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="郎咸平">郎咸平</a></li>
<li><a
href="#"><img src="images/f_pic_01.jpg"
alt="张大中">张大中</a></li>
</ul>
</div>
</div>
</div>
<div
class="downOne"><a title="上一张" οnmοuseοut="ISL_StopUp()"
οnmοuseup="ISL_StopUp()" οnmοusedοwn="ISL_GoUp()"
href="javascript:;">上一张</a></div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var Speed =
10; //速度(毫秒)
var Space = 10; //每次移动(px)
var PageWidth = 137; //翻页宽度
var
fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp =
0;
var AutoPlayObj = null;
GetObj("List2").innerHTML =
GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft =
fill;
GetObj("ISL_Cont").onmouseover = function() {
clearInterval(AutoPlayObj);
}
GetObj("ISL_Cont").onmouseout = function()
{
AutoPlay();
}
AutoPlay();
function GetObj(objName) {
if
(document.getElementById) {
return eval('document.getElementById("' +
objName + '")')
} else {
return eval
('document.all.' + objName)
}
}
function AutoPlay() {
//自动滚动
clearInterval(AutoPlayObj);
AutoPlayObj =
setInterval('ISL_GoDown();ISL_StopDown();', 3000); //间隔时间
}
function
ISL_GoUp() { //上翻开始
if (MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj =
setInterval('ISL_ScrUp();', Speed);
}
function ISL_StopUp() {
//上翻停止
clearInterval(MoveTimeObj);
if
(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
Comp = fill
- (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}
else {
MoveLock = false;
}
AutoPlay();
}
function
ISL_ScrUp() { //上翻动作
if (GetObj('ISL_Cont').scrollLeft <= 0)
{
GetObj('ISL_Cont').scrollLeft = GetObj
('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth
}
GetObj('ISL_Cont').scrollLeft -= Space;
}
function ISL_GoDown() {
//下翻
clearInterval(MoveTimeObj);
if (MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()', Speed);
}
function
ISL_StopDown() { //下翻停止
clearInterval(MoveTimeObj);
if
(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
Comp =
PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
CompScr();
} else {
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrDown() { //下翻动作
if
(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth) {
GetObj('ISL_Cont').scrollLeft =
GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;
}
GetObj('ISL_Cont').scrollLeft += Space;
}
function CompScr()
{
var num;
if (Comp == 0) {
MoveLock =
false;
return;
}
if (Comp < 0) { //上翻
if
(Comp < -Space) {
Comp += Space;
num =
Space;
} else {
num = -Comp;
Comp =
0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()', Speed);
} else { //下翻
if (Comp >
Space) {
Comp -= Space;
num = Space;
}
else {
num = Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()', Speed);
}
}
</script>
转载于:https://www.cnblogs.com/Tender/archive/2011/08/26/2154519.html
