js图片滚动问题 [100分]

sunzhongyuan9 2013-04-07 10:10:45
有没有人用过这个图片滚动的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 */

//-->
...全文
243 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
hch126163 2013-04-08
  • 打赏
  • 举报
 回复
　演示地址:http://www.popub.net/script/MSClass.html 　下载地址:http://www.popub.net/script/MSClass.js
scscms太阳光 2013-04-08
  • 打赏
  • 举报
 回复
就是一个滚动这也太多代码了。
<!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>
sunzhongyuan9 2013-04-08
  • 打赏
  • 举报
 回复
决定用这个简单的改了，谢谢诸位！ 
<!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>
NANU-NANA 2013-04-08
  • 打赏
  • 举报
 回复
恩，网上确实有很多例子
js 图片滚动js 图片滚动
js 图片滚动js 图片滚动js 图片滚动
js图片滚动插件支持单排图片上下滚动、图片无缝滚动
js图片滚动插件支持单排图片上下滚动、图片无缝滚动 js图片滚动插件支持单排图片上下滚动、图片无缝滚动 js图片滚动插件支持单排图片上下滚动、图片无缝滚动
js图片滚动
js图片滚动
原生js图片滚动插件新浪电影大片首页焦点图片滚动切换效果代码
原生js图片滚动插件新浪电影大片首页焦点图片滚动切换效果代码
javascript主题图片滚动
javascript主题图片滚动，互联网上随处可见，页面主题图片哦
JavaScript

87,902

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章