横向的JavaScript图片滚动

小提示

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代码

复制格式化注释注释清空

放大

<html >
<head>
<title>横向滚动控制</title>
<style type="text/css">
*{padding:0;margin:0;}
*{padding:0;margin:0;}
.wrap{position:relative;width:735px;overflow:hidden;}
#rollBox{overflow:hidden;margin:0 50px;}
#rollList{float:left;overflow:hidden;zoom:1;margin-right:-3000px;}  /* float,margin-right为了横版排列 */
#rollList li{float:left;display:inline;margin:15px;}
#rollList img{display:block;border:1px solid #efefef;}
.rollMenu{position:absolute;width:35px;height:80px;font-size:70px;text-decoration:none;color:#6B90DA;text-align:center;}
#rollLeft{top:20px;left:0;}
#rollRight{top:20px;right:0;}
</style>
</head>
<body>
<div class="wrap">
		<a onclick="scrollHori.start(this);" class="rollMenu" id="rollLeft" href="javascript:;">&#8249;</a>
		<a onclick="scrollHori.start(this);" class="rollMenu" id="rollRight" href="javascript:;">&#8250;</a>
		<div id="rollBox">
			<ul id="rollList">
				<li>
					<a href="#"><img height="95" width="95" src="//ku.shouce.ren/files/images/201601/56a33d42547cb.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="//ku.shouce.ren/files/images/201601/56a33d42547cb.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="//ku.shouce.ren/files/images/201601/56a33d42547cb.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="//ku.shouce.ren/files/images/201601/56a33d42547cb.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="//ku.shouce.ren/files/images/201601/56a33d42547cb.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="//ku.shouce.ren/files/images/201601/56a33d42547cb.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="//ku.shouce.ren/files/images/201601/56a33d42547cb.jpg"/></a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var $id=function(id){ return document.getElementById(id);}
			var scrollHori={
				locked:0,
				vector:0,
				start:function(thiso){
					if (scrollHori.locked == 0){
						if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) {
							scrollHori.vector = -5;
							scrollHori.scroll();
						}
						if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){
							scrollHori.vector = 5;
							scrollHori.scroll();
						}
					}
				},
				scroll:function(){
					var step=0;
					var size=$id('rollList').offsetWidth/$id('rollList').getElementsByTagName('li').length;
					play = setInterval(function(){
							if(size>step){
								$id('rollBox').scrollLeft+=scrollHori.vector;
								step+=Math.abs(scrollHori.vector);
								scrollHori.locked = 1;
							}
							else{
								scrollHori.stop();
							}
						}, 5);
				},
				stop:function(){
					if (window.play) {
						clearInterval(window.play);
						scrollHori.locked = 0;
					}
				}
			}
</script>
</div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

横向的JavaScript图片滚动

分类

图片代码

描述

横向的JavaScript图片滚动，左右可控制方向，当鼠标不点击的时候它会自动滚动，鼠标点击向左它则向左，完全由你控制，研究一下代码，你还可对代码进行修改，以适应你的网站需要。