js图片滚动问题 [100分]

Question

有没有人用过这个图片滚动的js，现在是左右滚动的。帮忙改成上下滚动的！
// JavaScript Document
< !----图片左右滚动--->
var zhangxu = {
$: function(objName) {
if (document.getElementById) {
return eval('document.getElementById("' + objName + '")')
} else {
return eval('document.all.' + objName)
}
},
isIE: navigator.appVersion.indexOf("MSIE") != -1 ? true: false,
addEvent: function(l, i, I) {
if (l.attachEvent) {
l.attachEvent("on" + i, I)
} else {
l.addEventListener(i, I, false)
}
},
delEvent: function(l, i, I) {
if (l.detachEvent) {
l.detachEvent("on" + i, I)
} else {
l.removeEventListener(i, I, false)
}
},
readCookie: function(O) {
var o = "",
l = O + "=";
if (document.cookie.length > 0) {
var i = document.cookie.indexOf(l);
if (i != -1) {
i += l.length;
var I = document.cookie.indexOf(";", i);
if (I == -1) I = document.cookie.length;
o = unescape(document.cookie.substring(i, I))
}
};
return o
},
writeCookie: function(i, l, o, c) {
var O = "",
I = "";
if (o != null) {
O = new Date((new Date).getTime() + o * 3600000);
O = "; expires=" + O.toGMTString()
};
if (c != null) {
I = ";domain=" + c
};
document.cookie = i + "=" + escape(l) + O + I
},
readStyle: function(I, l) {
if (I.style[l]) {
return I.style[l]
} else if (I.currentStyle) {
return I.currentStyle[l]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var i = document.defaultView.getComputedStyle(I, null);
return i.getPropertyValue(l)
} else {
return null
}
}
};//滚动图片构造函数
//UI&UE Dept. mengjia
//080623
function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {
this.scrollContId = scrollContId;
this.arrLeftId = arrLeftId;
this.arrRightId = arrRightId;
this.dotListId = dotListId;
this.dotClassName = "dotItem";
this.dotOnClassName = "dotItemOn";
this.dotObjArr = [];
this.pageWidth = 0;
this.frameWidth = 0;
this.speed = 10;
this.space = 10;
this.pageIndex = 0;
this.autoPlay = true;
this.autoPlayTime = 5;
var _autoTimeObj, _scrollTimeObj, _state = "ready";
this.stripDiv = document.createElement("DIV");
this.listDiv01 = document.createElement("DIV");
this.listDiv02 = document.createElement("DIV");
if (!ScrollPic.childs) {
ScrollPic.childs = []
};
this.ID = ScrollPic.childs.length;
ScrollPic.childs.push(this);
this.initialize = function() {
if (!this.scrollContId) {
throw new Error("必须指定scrollContId.");
return
};
this.scrollContDiv = zhangxu.$(this.scrollContId);
if (!this.scrollContDiv) {
throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");
return
};
this.scrollContDiv.style.width = this.frameWidth + "px";
this.scrollContDiv.style.overflow = "hidden";
this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;
this.scrollContDiv.innerHTML = "";
this.scrollContDiv.appendChild(this.stripDiv);
this.stripDiv.appendChild(this.listDiv01);
this.stripDiv.appendChild(this.listDiv02);
this.stripDiv.style.overflow = "hidden";
this.stripDiv.style.zoom = "1";
this.stripDiv.style.width = "32766px";
if (!+ [1, ]) {
this.listDiv01.style.styleFloat = "left";
this.listDiv02.style.styleFloat = "left";
} else {
this.listDiv01.style.cssFloat = "left";
this.listDiv02.style.cssFloat = "left";
};
zhangxu.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));
zhangxu.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));
if (this.arrLeftId) {
this.arrLeftObj = zhangxu.$(this.arrLeftId);
if (this.arrLeftObj) {
zhangxu.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));
zhangxu.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));
zhangxu.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))
}
};
if (this.arrRightId) {
this.arrRightObj = zhangxu.$(this.arrRightId);
if (this.arrRightObj) {
zhangxu.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));
zhangxu.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));
zhangxu.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))
}
};
if (this.dotListId) {
this.dotListObj = zhangxu.$(this.dotListId);
if (this.dotListObj) {
var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),
i,
tempObj;
for (i = 0; i < pages; i++) {
tempObj = document.createElement("span");
this.dotListObj.appendChild(tempObj);
this.dotObjArr.push(tempObj);
if (i == this.pageIndex) {
tempObj.className = this.dotClassName
} else {
tempObj.className = this.dotOnClassName
};
tempObj.title = "第" + (i + 1) + "页";
zhangxu.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))
}
}
};
if (this.autoPlay) {
this.play()
}
};
this.leftMouseDown = function() {
if (_state != "ready") {
return
};
_state = "floating";
_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)
};
this.rightMouseDown = function() {
if (_state != "ready") {
return
};
_state = "floating";
_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)
};
this.moveLeft = function() {
if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {
this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth
} else {
this.scrollContDiv.scrollLeft += this.space
};
this.accountPageIndex()
};
this.moveRight = function() {
if (this.scrollContDiv.scrollLeft - this.space <= 0) {
this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
} else {
this.scrollContDiv.scrollLeft -= this.space
};
this.accountPageIndex()
};
this.leftEnd = function() {
if (_state != "floating") {
return
};
_state = "stoping";
clearInterval(_scrollTimeObj);
var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;
this.move(fill)
};
this.rightEnd = function() {
if (_state != "floating") {
return
};
_state = "stoping";
clearInterval(_scrollTimeObj);
var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;
this.move(fill)
};
this.move = function(num, quick) {
var thisMove = num / 5;
if (!quick) {
if (thisMove > this.space) {
thisMove = this.space
};
if (thisMove < -this.space) {
thisMove = -this.space
}
};
if (Math.abs(thisMove) < 1 && thisMove != 0) {
thisMove = thisMove >= 0 ? 1 : -1
} else {
thisMove = Math.round(thisMove)
};
var temp = this.scrollContDiv.scrollLeft + thisMove;
if (thisMove > 0) {
if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {
this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth
} else {
this.scrollContDiv.scrollLeft += thisMove
}
} else {
if (this.scrollContDiv.scrollLeft - thisMove <= 0) {
this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove
} else {
this.scrollContDiv.scrollLeft += thisMove
}
};
num -= thisMove;
if (Math.abs(num) == 0) {
_state = "ready";
if (this.autoPlay) {
this.play()
};
this.accountPageIndex();
return
} else {
this.accountPageIndex();
setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)
}
};
this.next = function() {
if (_state != "ready") {
return
};
_state = "stoping";
this.move(this.pageWidth, true)
};
this.play = function() {
if (!this.autoPlay) {
return
};
clearInterval(_autoTimeObj);
_autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)
};
this.stop = function() {
clearInterval(_autoTimeObj)
};
this.pageTo = function(num) {
if (_state != "ready") {
return
};
_state = "stoping";
var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;
this.move(fill, true)
};
this.accountPageIndex = function() {
this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);
if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {
this.pageIndex = 0
};
var i;
for (i = 0; i < this.dotObjArr.length; i++) {
if (i == this.pageIndex) {
this.dotObjArr[i].className = this.dotClassName
} else {
this.dotObjArr[i].className = this.dotOnClassName
}
}
}
};
/*  |xGv00|348a1e765af980b2d2cc3f5f23c1e236 */
//-->
jsjavascript图片滚动

Answer 1

就是一个滚动这也太多代码了。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            Xhun(".a");
        });
        function Xhun(_box) {
            $(_box).each(function(){
                var _this=$(this);//储存对象
                var w=_this.width();//统计外框的宽度
                var li=_this.find("li");//查找所有图片对应的li
                var l=li.size();//统计多少张图片 li
                var lw=li.outerHeight(true);
                var i=1;//控制图片滚动的速度
                if(lw*l>w){
                    //判断一下图片总长度是否大于外框，如果不大于就不做动画（也做不了）
                    _this.find("ul").append(li.clone()).width(lw*l*2).hover(function(){i=0},function(){i=1});
                    //吉隆一份li到ul里，并设置ul的长度，让图片排成一排。同时设置鼠标经过停止动画
                    setInterval(function(){
                        var _l=_this.scrollLeft();
                        _l=_l>l*lw?0:_l+i;
                        _this.scrollLeft(_l);
                    },40)
                }
            })
        }
    </script>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        ul,li { list-style: none; margin: 0; padding: 0}
        li { float: left; width: 100px;overflow: hidden }
        img { width: 100px; height: 100px; }
        .a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }
    </style>
</head>
<body>
<div class="a">
    <ul>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_000.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" alt="img" /></a></li>
    </ul>
</div>
 
<div class="a">
    <ul>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_000.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_005.jpg" alt="img" /></a></li>
        <li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_006.jpg" alt="img" /></a></li>
    </ul>
</div>
</body>
</html>

Answer 2

　演示地址:http://www.popub.net/script/MSClass.html
　下载地址:http://www.popub.net/script/MSClass.js

Answer 3

决定用这个简单的改了，谢谢诸位！
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带左右箭头切换的自动滚动图片JS特效</title>
<style type="text/css"> 
 
<!--
.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;margin:0 auto;}
.rollBox .LeftBotton{height:52px;width:19px;background:url(button.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .RightBotton{height:52px;width:20px;background:url(button.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:530px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:132px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
-->
 
</style>
</head>
<body>
<div class="rollBox">
     <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
     <div class="Cont" id="ISL_Cont">
      <div class="ScrCont">
       <div id="List1">
        <!-- 图片列表 begin -->
         <div class="pic">
         <img src="http://www.mu-seo.com/demo/2010/00391/images/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87" /></a>
         </div>       
   <div class="pic">
          <img src="http://www.mu-seo.com/demo/2010/00391/images/U2716P6T64D51897F1091DT20080906180505.jpg" width="109" height="87"  /></a>
         </div>
         <div class="pic">
         <img src="http://www.mu-seo.com/demo/2010/00391/images/U2716P6T64D51897F1322DT20080906204943.jpg" width="109" height="87" /></a>         </div>
         <div class="pic">
          <img src="http://www.mu-seo.com/demo/2010/00391/images/U2716P6T64D51897F1323DT20080906204943.jpg" width="109" height="87" /></a>
         </div>
         <div class="pic">
          <img src="http://www.mu-seo.com/demo/2010/00391/images/U2716P6T64D51897F1324DT20080906205503.jpg" width="109" height="87" /></a>
         </div>
  <div class="pic">
          <img src="http://www.mu-seo.com/demo/2010/00391/images/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87" /></a>
         </div>      
         <div class="pic">
          <img src="http://www.mu-seo.com/demo/2010/00391/images/U2716P6T64D51897F1325DT20080906205624.jpg" width="109" height="87" /></a>
         </div>
        <!-- 图片列表 end -->
       </div>
       <div id="List2"></div>
      </div>
     </div>
     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
    </div>
   </div>
 
<script language="javascript" type="text/javascript"> 
<!--//--><![CDATA[//><!--
//图片滚动列表 5icool.org
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 528; //翻页宽度
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>
<body>
</body>
</html>