带前后翻页的图片关东 js特效

2019/7/24 7:24:43 人评论 次浏览 分类:学习教程

原文链接:http://www.cnblogs.com/Tender/archive/2011/08/26/2154519.html

页面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

相关资讯

  • 那些我们不愿意承认的事

    很久没有见的老朋友,准确的说应该是很久没有见过的老师,一个比我大两岁的老师,我上初中的时候他从高中回来教我了一年。后来又回去上高中,我上高中的时候他上大学,现在我刚大学毕业他创办了公司。昨日一见依然如故,他还是热爱销售,而我却成了纯粹的技术人员。 看到他…

    2015/6/22 13:12:47

学习教程

共有访客发表了评论 网友评论

验证码: 看不清楚?

    立即查看