Js图片滚动代码，横向纵向滚动，面向对象代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>同页面多方向的图片滚动，面向对象</title>
<style>
div,h2,ul,li,img,span{margin:0;padding:0;}
li{list-style:none;}
/*layout*/
.wrapper{width:960px;margin:0 auto}
.prize{width:960px;margin:20px auto;position:relative;background:#f6f4f2;font:12px Tahoma,sans-serif;border:1px solid #ccc;padding:1px;color:#052d30;}
/*title*/
.prize h2{height:25px;font:bold 14px/25px Tahoma;background:#0cf;text-indent:10px;text-shadow:1px 1px 1px #fff;}
/*content*/
.prize-con{width:900px;margin:0 auto;height:128px;overflow:hidden;padding:10px 0;position:relative;}
	.prize-con ul{width:200%;position:absolute;}
	.prize-con li{float:left;_display:inline;line-height:25px;text-align:center;margin-right:5px;}
	.prize-con li img{width:141px;height:110px;display:block;border:1px solid #ccc;padding:1px;}
.block2{width:220px;margin:0;}
	.block2 .prize-con{width:150px;height:410px;padding:0;margin:10px auto;}
	.block2 ul{width:auto;}
	.block2 li{float:none;}
/*button*/
.prize span{display:block;position:absolute;top:50%;width:13px;height:15px;background:#000 url(bun-bg.jpg) no-repeat 0 0;cursor:pointer;}
	span.l-bun{left:5px;}
	span.r-bun{background-position:0 -15px;right:10px;}
</style>
</head>
<body>
<div class="wrapper">
	
	<div class="prize">
		<h2>奖品展示</h2>
		<div class="prize-con dd">
			<ul>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题1</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题2</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题3</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题4</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题5</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题6</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题7</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题8</li>
			</ul>
		</div>
		<span class="l-bun"></span>
		<span class="r-bun"></span>
	</div>
	
	<div class="prize block2">
		<h2>奖品展示</h2>
		<div class="prize-con dd">
			<ul>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题1</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题2</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题3</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题4</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题5</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题6</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题7</li>
				<li><img src="//ku.shouce.ren/files/images/201601/56a34a0117a0d.jpg" />图片标题8</li>
			</ul>
		</div>
		<span class="l-bun"></span>
		<span class="r-bun"></span>
	</div>
</div>
<script>
	//find elements
	_get = function(e,c){
		var _isClass = e.indexOf(".")>=0,_isId = e.indexOf("#")>=0,newEle = e.substring(1);
		//get frist argument
		if(_isClass&&_isId) return;
		if(_isId){
			var obj = typeof newEle=="string"?document.getElementById(newEle):false;
		}else if(_isClass){
			var obj = _class(e);
		}else{
			return;
		}
		//get class
		function _class(c,o){
			var oDom = o?o:document,
				cParent = oDom.getElementsByTagName("*"),
				classAry = [],
				leng = cParent.length;
			for(var i=0;i<leng;i++){
				allC = cParent[i].className;	
				if(allC.match("\\b"+newEle+"(?:$|[^\w\-])")){
					classAry.push(cParent[i])
				}
			}	
			return classAry.length==1?classAry[0]:classAry;
		}
		//second argument
		var _isArr = obj.constructor==Array;
		if(!!c){
			if(_isArr){
				for(var j=0,len=obj.length;j<len;j++){
					var ele = obj[j].getElementsByTagName(c);
					obj[j] = ele.length==1?ele[0]:ele;
				}
			}else{
				obj = obj.getElementsByTagName(c);
			}	
		}	
		return obj.length==1?obj[0]:obj;
	}
	//even
	function Roll(){this.initial.apply(this,arguments)}
	Roll.prototype = {
		initial:function(o,l,r,s){
			var _this = this;
			this.obj = o;
			this.child = o.children;
			this.timeId = null;
			this.interval = null;
			this.funTime = null;
			this.set(s||{});
			this.oAttr = !!this.s.dir?this.child[0].offsetHeight:this.child[0].offsetWidth;
			this.dirNo = !!this.s.dir?"top":"left";
			l.onclick = function(){_this.prev();_this.s.auto = false;};
			r.onclick = function(){_this.next();_this.s.auto = false;};
			o.onmouseover = function(){_this.s.auto = false;clearInterval(_this.funTime);}
			this.s.auto&&(this.next(),o.onmouseout = l.onmouseout = r.onmouseout = function(){_this.funTime = setTimeout(function(){_this.s.auto = true;_this.next()},500)});
		},
		set:function(v){
			this.s = {
				dir:0,//滚动方向，0为横向滚动，1为纵向滚动
				auto:true//是否自动滚动
			}
			for(c in v){this.s[c] = v[c]};
		},
		prev:function(){
			this.obj.insertBefore(this.child[this.child.length-1],this.obj.firstChild);
			this.obj.style[this.dirNo] = -this.oAttr+"px";
			this.moverIt(0);
		},	
		next:function(){
			this.moverIt(-this.oAttr,function(){
				var dir = !!this.s.dir?"top":"left";
				this.obj.appendChild(this.child[0]);
				this.obj.style[this.dirNo] = 0;
			});			
		},
		moverIt:function(i,callBack){
			var _this = this;
			clearInterval(this.timerId);
			clearInterval(_this.funTime)
			clearInterval(this.interval);
			this.timerId = setInterval(function(){
				var dir = !!_this.s.dir?_this.obj.offsetTop:_this.obj.offsetLeft,
					iSpeed = (i-dir)/5;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				dir==i?(clearInterval(_this.timerId),callBack&&callBack.apply(_this),!!_this.s.auto&&(_this.interval=setTimeout(function(){_this.next();},1500))):_this.obj.style[_this.dirNo] = iSpeed + dir + "px"
			},30);
		}	
	}
	
	//marquee
	var menu = _get(".prize-con","ul"),lBun = _get(".l-bun"),rBun = _get(".r-bun");
	for(var i=0,leng=menu.length;i<leng;i++){
		var mq = new Roll(menu[i],lBun[i],rBun[i],{dir:i%2?1:0}),mq = null;//实例化，当板块为偶数的时候像左边滚动，反之向上
	}
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js图片滚动代码，横向纵向滚动，面向对象代码

分类

图片代码

描述

一款JS图片滚动代码，在同一页面可以设置多个图上滚动，可以水平横向滚动，也可以纵向垂直滚动，JS代码采用面向对象的方法，调用非常方便。其中的参数传递如果想默认不滚动只需要在实例化的时候传入{auto:flase}即可，同时滚动方向可以通...