橫向的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   id="sdef92h"   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   class="d124ikh"   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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些