横向的JavaScript图片滚动_图片特效特效

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

<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="http://p1.mb5u.com/texiao/1/20110225160553615.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://p1.mb5u.com/texiao/1/20110225160553615.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://p1.mb5u.com/texiao/1/20110225160553615.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://p1.mb5u.com/texiao/1/20110225160553615.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://p1.mb5u.com/texiao/1/20110225160553615.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://p1.mb5u.com/texiao/1/20110225160553615.jpg" /></a>
				</li>
				<li>
					<a href="#"><img height="95" width="95" src="http://p1.mb5u.com/texiao/1/20110225160553615.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>

所属频道：图片特效特效/更新时间：2012-11-14

[收藏][报错][返回列表]

横向的JavaScript图片滚动_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些