文本和图片无缝滚动代码

小提示

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 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>
<title>实用的文本和图片无缝滚动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
html,body,div,img,h1,h2,h3,h4,h5,h6{
	vertical-align:baselinebaseline;
	font-family:inherit;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	outline:0;
	padding:0;
	margin:0;
	border:0;
}
body{
	font-family:"宋体";
	background:#e0e3ec url(//ku.shouce.ren/files/images/201601/56a34abc06e36.jpg) repeat top left;
	font-weight:400;
	font-size:15px;
	color:#393b40;
}
a{
	color:#333;
	text-decoration:none;
}
.container{
	width:100%;
	position:relative;
	text-align:center;
}
h1{
	line-height:60px;
	font-size:22px;
	clear:both;
}
h2{
	padding-top:20px;
	line-height:40px;
	font-weight:bolder;
}
.main{
	width:1001px;
	margin: 10px auto 30px auto;
}
.content{
	background:#FFFFFF;
	border:1px solid #eaeaea;
	padding:20px 0;
}
#newsbox{
	height:150px;
	overflow:hidden;
	border:1px solid #e1e1e1;
	width:350px;
	margin:0 auto;
}
#newslist li{
	line-height:25px;
	text-align:left;
	padding-left:15px;
}
table{
	margin:0 auto;
	border:1px solid #e1e1e1;
}
#probox{
	width:700px;
	overflow:hidden;
	height:190px;
	padding:15px 0;
}
#prolist{
	width:1500px;
}
#prolist li{
	float:left;
	text-align:center;
	line-height:25px;
}
#left,#right{
	cursor:pointer;
}
</style>
<script>
var Util={
	$:function(id){return document.getElementById(id);},
	on:function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent("on"+type,handler);
		}else{
			element["on"+type]=handler;
		}
	},
	un:function(element,type,handler){
		if(element.removeEventListener){
			element.removeEventListener(type,handler,false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type,handler);
		}else{
			element["on"+type]=null;
		}
	},
	getWindowHeight:function(){
		var pageHeight=window.innerHeight;
		if(typeof pageHeight!="number"){
			pageHeight=(document.compatMode=="CSS1Compat")?document.documentElement.clientHeight:document.body.clientHeight;
		}
		return pageHeight;
	},
	getWindowWidth:function(){
		var pageWidth=window.innerWidth;
		if(typeof pageWidth!="number"){
			pageWidth=(document.compatMode=="CSS1Compat")?document.documentElement.clientWidth:document.body.clientWidth;
		}
		return pageWidth;
	},
	isIE6:function(){
		var arVersion = navigator.appVersion.split("MSIE");
		var version = parseFloat(arVersion[1]);
		if ((version >= 5.5)&&(version <7)&&document.all){
			return true;
		}else{
			return false;
		}
	}
}
function js100(fun){Util.on(window,"load",fun)}
var Javascript100 = {
	isIE6 : Util.isIE6(),
	addFavorite : function(opt){
		var url = "http://"+opt.url,title = opt.title,id = Util.$(opt.id);
		if(id){
			Util.on(id,"click",function(){try{window.external.addFavorite(url,title);}catch(e){try{window.sidebar.addPanel(title,url,"");}catch(e){alert(e.message);}} return false;});
		}
	},
	setHomePage : function(opt){
		var b="http://"+opt.url,a=Util.$(opt.id);
		if(a){
			Util.on(a,"click",function(){
			   if(document.all){
				   document.body.style.behavior="url(#default#homepage)";
				   document.body.setHomePage(b)
				}
				return false;
			})
		}
	},
	fixPng24:function(){
		if (this.isIE6){
			var imgs=document.images;
		   for (var i=0;i<imgs.length;i++){
			   var img=imgs[i],imgName = img.src.toUpperCase();
			   if (imgName.substring(imgName.length - 3,imgName.length)=="PNG") {
				   var imgID = (img.id) ? "id='" + img.id + "'":"";
				   var imgClass = (img.className) ? "class='" + img.className + "' " : "";
				   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
				   var imgStyle = "display:inline-block;" + img.style.cssText;
				   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
				   var strNewHTML = "<span " + imgID + imgClass + imgTitle
						   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle
						   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
						   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
				   img.outerHTML = strNewHTML;
				   i = i - 1;
			   }
		   }
		}
	},
	floatDiv:function(opt){
		var id = Util.$(opt.id);
		var top = parseInt(opt.top,10);
		var timer = null;
		var winWidth = Util.getWindowWidth();
		var mouseoverTarget = 0;
		var mouseoutTarget = 0;
		var scrollTimer = null;
		id.style.position = (this.isIE6) ? "absolute" : "fixed";
		id.style.top = top + "px";
		if(opt.left){
			hidenPx = parseInt(opt.left,10);
			id.style.left = hidenPx + "px";
			mouseoverTarget = 0;
			mouseoutTarget = hidenPx;
		}else{
			hidenPx = parseInt(opt.right,10);
			id.style.right = hidenPx + "px";
			mouseoverTarget = winWidth - id.offsetWidth;
			mouseoutTarget = winWidth + hidenPx;
		}
		if(hidenPx < 0){
			Util.on(id,"mouseover",function(){
				move(mouseoverTarget);
			});
			Util.on(id,"mouseout",function(){
				move(mouseoutTarget);
			});
		}
		function move(target){
			clearInterval(timer);
			timer = setInterval(function(){
				var speed = (id.offsetLeft - target) / 5;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				id.offsetLeft == target ? clearInterval(timer) : id.style.left = id.offsetLeft - speed + "px";
			},30);
		}
		if(this.isIE6){
			Util.on(window,"scroll",function(){
				clearTimeout(scrollTimer);
				var scrollTimer = setTimeout(function(){
					id.style.top = ((document.documentElement.scrollTop || document.body.scrollTop) + top)+"px";
									},1)
			});
		}
	},
	linkage : function(opt){
		var data = opt.data,id1 = Util.$(opt.id1),id2 = Util.$(opt.id2);
		var newOption,selectIndex,tempArr,tempLen;
		for(var i = 0;i < data[0].length;i++){
			newOption = new Option(data[0][i],data[0][i]);
			id2.add(newOption,undefined);
		}
		Util.on(id1,"change",function(){
			selectIndex = id1.options[id1.selectedIndex].index;
			tempArr = data[selectIndex];
			tempLen = id2.options.length;
			for(i = 0;i < data[selectIndex].length;i++){
				newOption = new Option(tempArr[i],tempArr[i]);
				id2.add(newOption,undefined);
			}
			for(i = 0;i < tempLen;i++){
				id2.remove(0);
			}
		})
	},
	tab : function(opt){
		var btns = opt.btns,
			tabs = opt.tabs,
			handler = null,
			activeClassName = opt.activeClassName,
			eventType = opt.eventType || 1,
			reg = null,
			delay = opt.delay || 150;
		switch(eventType){
			case 1:
				eventType = "mouseover";
				break;
			case 2:
				eventType = "click";
				break;
		}
		for(var i = 0;i < btns.length;i++){
			Util.$(tabs[i]).style.display = "none";
				Util.on(Util.$(btns[i]),eventType,function(num){
				return function(){
					if(handler != null) clearTimeout(handler);
					handler = setTimeout(function(){
							for(var j=0;j < btns.length;j++){
								if(num == j){
									Util.$(btns[j]).className += (" " + activeClassName);
									Util.$(tabs[j]).style.display = "block";
								}else{
									reg = eval("/(^"+activeClassName+"(\\s)*)|((\\s)"+activeClassName+")/");
									Util.$(btns[j]).className = Util.$(btns[j]).className.replace(reg,"")
									Util.$(tabs[j]).style.display = "none";
								}
							}
							return false;
						},delay)
				}
			}(i));
		}
		Util.$(tabs[0]).style.display = "block";
	},
	downMenu : function(opt){
		var id = Util.$(opt.id),
			pElement = (opt.pElement || "LI").toUpperCase(),
			cElement = (opt.cElement || "UL").toUpperCase(),
			list = id.getElementsByTagName(pElement);
		for(var i = 0;i < list.length;i++){
			Util.on(list[i],"mouseover",function(num){
				return function(){
					var childList = list[num].childNodes;
					for(var j = 0;j < childList.length;j++){
						if(childList[j].tagName == cElement){
							childList[j].style.display = "block";
						}
					}
				}
			}(i));
			Util.on(list[i],"mouseout",function(num){
				return function(){
					var childList = list[num].childNodes;
					for(var j = 0;j < childList.length;j++){
						if(childList[j].tagName == cElement){
							childList[j].style.display = "none";
						}
					}
				}
			}(i));
		}
	},
	scroll : function(opt){
		if(!opt.box || !opt.list){return false;}
		var _this = this;
		var scrollBox = Util.$(opt.box);
		var scrollList = Util.$(opt.list);
		var items = scrollList.children;
		var timer = null;
		var autoTimer = null;
		var scrollLength = 0;
		var cssDirection = "top";
		var jsDirection = "offsetTop";
		var advanceArrow = Util.$(opt.advanceArrow);
		var retreatArrow = Util.$(opt.retreatArrow);
		var spacing = opt.spacing || 4000;
		scrollBox.style.position = "relative";
		scrollList.style.position = "relative";
		if(opt.direction === "top"){
			scrollLength = items[0].offsetHeight;
			cssDirection = "top";
			jsDirection = "offsetTop";
		}else{
			scrollLength = items[0].offsetWidth;
			cssDirection = "left";
			jsDirection = "offsetLeft";
		}
		if(advanceArrow){
			advanceArrow.onclick = function (){
				clearInterval(autoTimer);
				up();
				autoTimer = setInterval(function(){up()},spacing);
			}
		}
		if(retreatArrow){
			retreatArrow.onclick = function (){
				clearInterval(autoTimer);
				down();
				autoTimer = setInterval(function(){up()},spacing);
			}
		}
		autoTimer = setInterval(function(){up()},spacing);
		scrollList.onmouseover = function(){
			clearInterval(autoTimer);
		}
		scrollList.onmouseout = function(){
			autoTimer = setInterval(function(){up()},spacing);
		}
		function up(){
			scrollList.insertBefore(items[items.length-1],scrollList.firstChild);
			scrollList.style[cssDirection] = - scrollLength + "px";
			move(0);
		}
		function down(){
			move(-scrollLength,function(){
				scrollList.appendChild(items[0]);
				scrollList.style[cssDirection] = "0px";
			});
		}
		function move(target,callBack){
			clearInterval(timer);
			timer = setInterval(function(){
				var speed = (target - scrollList[jsDirection]) / 5;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				target == scrollList[jsDirection] ? (clearInterval(timer),callBack && callBack.apply(_this)) : scrollList.style[cssDirection] = speed + scrollList[jsDirection] + "px";
			},30);
		}
	},
	slider : function(opt){
		var _this = this;
		var sliderBox = Util.$(opt.box);
		var sliderList = Util.$(opt.list);
		var sliderLength = 0;
		var cssDirection = "top";
		var jsDirection = "offsetTop";
		var items = sliderList.children;
		var btnList = null;
		var btns = null;
		var timer = null;
		var autoTimer = null;
		var index = 0;
		var spacing = opt.spacing;
		var btnListClass = opt.btnListClass;
		var btnClass = opt.btnClass;
		sliderBox.style.position = "relative";
		sliderList.style.position = "relative";
		if(opt.direction === "top"){
			sliderLength = items[0].offsetHeight;
			cssDirection = "top";
			jsDirection = "offsetTop";
		}else{
			sliderLength = items[0].offsetWidth;
			cssDirection = "left";
			jsDirection = "offsetLeft";
		}
		createBtn();
		btns = btnList.getElementsByTagName("li");
		for(var i = 0;i < btns.length;i++){
			btns[i].onclick = function(ii){
				return function(){
					clearInterval(autoTimer);
					moveIndex(ii)
					move(-ii * sliderLength,function(){
						index = ii;
					});
				}
			}(i)
		}
		autoTimer = setInterval(function(){
			index = (index >= items.length - 1) ? 0 : ++index;
			moveIndex(index)
			move(-sliderLength * index);
		},spacing);
		sliderBox.onmouseover = function(){
			clearInterval(autoTimer);
		},
		sliderBox.onmouseout = function(){
			autoTimer = setInterval(function(){
				index = (index >= items.length - 1) ? 0 : ++index;
				moveIndex(index)
				move(-sliderLength * index);
			},spacing);
		}
		function createBtn(){
			btnList = document.createElement("ul");
			btnList.className = btnListClass;
			for(var i = 0;i < items.length;i++){
				btnList.innerHTML += "<li>"+(i+1)+"</li>"; 
			}
			btnList.children[0].className = btnClass;
			sliderBox.appendChild(btnList);
		}
		function moveIndex(index){
			for(var i = 0;i < btns.length;i++){
				btns[i].className = (index === i) ? btnClass : "";
			}
		}
		function move(target,callBack){
			clearInterval(timer);
			timer = setInterval(function(){
				var speed = (target - sliderList[jsDirection]) / 5;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				target == sliderList[jsDirection] ? (clearInterval(timer),callBack && callBack.apply(_this)) : sliderList.style[cssDirection] = speed + sliderList[jsDirection] + "px";
			},30);
		}
	},
	foldMenu : function(opt){
		var foldMenuBox = Util.$(opt.id);
		var foldElement = opt.foldElement&&opt.foldElement.toLowerCase() || "UL";
		var className = opt.afterClassName;
		var reg = null;
		foldMenuBox.onclick = function(event){
			if(event){			
				e =event;
				e.stopPropagation();
			}else{
				e = window.event
				e.cancelBubble = true;
			}
			var target = e.srcElement || e.target;
			if(target.getElementsByTagName(foldElement).length > 0 && target.tagName !== foldMenuBox.tagName){
				target.getElementsByTagName(foldElement)[0].style.display = (target.getElementsByTagName(foldElement)[0].style.display === "block") ? "none" : "block";
				if(className){
					reg = eval("/(^"+className+"(\\s)*)|((\\s)"+className+")/");
					(target.getElementsByTagName(foldElement)[0].style.display === "block") ? target.className += " "+className : target.className = target.className.replace(reg,"");
				}
			}
		}
	}
}
</script>
</head>
<body>
<div class="container">
	<div class="main">
		<h1>无缝滚动</h1>
		<h2>无缝滚动实例1</h2>
		<div class="content">
			<div id="newsbox">
				<ul id="newslist">
					<li>我是javasscript100插件无缝滚动功能</li>
					<li>我是无缝滚动的哦</li>
					<li>我的滚动间隔是3秒</li>
					<li>我没有拖动按钮</li>
					<li>我的滚动方向是从上向下滚动的</li>
					<li>我是javasscript100插件无缝滚动功能</li>
					<li>我是javasscript100插件无缝滚动功能</li>
					<li>我是javasscript100插件无缝滚动功能</li>
					<li>我是javasscript100插件无缝滚动功能</li>
					<li>我是javasscript100插件无缝滚动功能</li>
				</ul>
			</div>
		</div>
		<h2>无缝滚动实例2</h2>
		<div class="content">
			<table align="center">
				<tr>
					<td id="left"><img src="//ku.shouce.ren/files/images/201601/56a34abdced20.jpg"></td>
					<td>
						<div id="probox">
							<ul id="prolist">
								<li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34abebcc7a.jpg"></a><br>Ipad1</li>
								<li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34abebcc7a.jpg"></a><br>Ipad2</li>
								<li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34abebcc7a.jpg"></a><br>Ipad3</li>
								<li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34abebcc7a.jpg"></a><br>Ipad4</li>
								<li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34abebcc7a.jpg"></a><br>Ipad5</li>
								<li><a href="#"><img src="//ku.shouce.ren/files/images/201601/56a34abebcc7a.jpg"></a><br>Ipad6</li>
							</ul>
						</div>
					</td>
					<td id="right"><img src="//ku.shouce.ren/files/images/201601/56a34ac02614d.jpg"></td>
				</tr>
			</table>
		</div>
	</div>
</div>
<script type="text/javascript">
js100(function(){
	Javascript100.scroll({box:"newsbox",list:"newslist",direction:"top",spacing:3000});
	Javascript100.scroll({box:"probox",list:"prolist",advanceArrow:"left",retreatArrow:"right"});
});
</script>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

文本和图片无缝滚动代码

分类

图片代码

描述

实用的文本和图片无缝滚动效果，代码分别为两个无缝滚动实例，一个滚动的对象是文字，另一个是图片，文字是上下垂直滚动，图片是左右平行滚动，都是大家十分喜欢和常用的网页特效，本滚动代码支持自动滚动，也可以点击箭头去控制滚动。