js实现图片滚动

<link rel="stylesheet" href="../css/picscroll2.css" media="screen" type="text/css">
<script src="../js/yahoo.js" type="text/javascript"></script>
<script src="../js/event.js" type="text/javascript"></script>
<script src="../js/dom.js" type="text/javascript"></script>
<script src="../js/animation.js" type="text/javascript"></script>

<script type="text/javascript">

		YAHOO.example = function() {
		var $D = YAHOO.util.Dom;
		var $E = YAHOO.util.Event;
		var $A = YAHOO.util.Anim;
		var $M = YAHOO.util.Motion;
		var $DD = YAHOO.util.DD;
		var $ = $D.get;
		var x = 1;
		return {
			init : function() {
				$E.on(['move-left','move-right'], 'click', this.move);
			},
			move : function(e) {
				$E.stopEvent(e);
				switch(this.id) {
					case 'move-left':
						if ( x === 1 ) {
							return;
						}
						var attributes = {
							points : {
								by : [101, 0]
							}
						};
						x--;
					break;
					case 'move-right':
						if ( x === 18 ) {
							return;
						}
						var attributes = {
							points : {
								by : [-101, 0]
							}
						};
						x++;
					break;
				};
				var anim = new $M('themes', attributes, 0.5, YAHOO.util.Easing.easeOut);
				anim.animate();
			}
		};
	}();
	YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example, true);

	</script>
<style>

.divhighlightit img{
border: 1px solid #ffffff;
}

.highlightit:hover img{
border: 2px solid red;
}

.divhighlightit {
border: 2px solid #B5BDC6;
}


</style>
<div id="doc" style="clear: both;">
	<div id="info">
		<a id="move-left" href="#" ><img  src="../images/left.jpg"  border="0" height="70"></a> 
		<div class="mod">
			<ul style="position: relative; left: 0px; top: 2px;" id="themes">
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
				<li><a  class="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>			
			</ul>
		</div>
		<a id="move-right" href="#"><img src="../images/right.jpg"  border="0" height="70"></a> 
	</div>
</div>

#vecherthemes {
	WIDTH: 4000px
}

#vecherthemes {
	FLOAT: left;
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	OVERFLOW: hidden;
	PADDING-TOP: 0px
}

#vecherthemes LI {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	OVERFLOW: hidden;
	PADDING-TOP: 0px
}

#vecherthemes LI {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 0px;
	WIDTH: 79px;
	PADDING-TOP: 0px;
	HEIGHT: 80px
}

#themes LI {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	OVERFLOW: hidden;
	PADDING-TOP: 0px
}

#themes LI {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 0px;
	WIDTH: 100px;
	PADDING-TOP: 0px;
	HEIGHT: 80px
}

LI IMG {
	BORDER-RIGHT: #eee 1px solid;
	BORDER-TOP: #eee 1px solid;
	BORDER-LEFT: #eee 1px solid;
	BORDER-BOTTOM: #eee 1px solid
}

.highlightit img {
	border: 1px solid #ffffff;
}

.divhighlightit {
	border: 2px solid #B5BDC6;
}

.highlightit:hover img {
	border: 2px solid red;
}

#vecherdoc {
	height: 101px;
	width: 433px;
	background-repeat: repeat-x
}

#vecherinfo {
	PADDING-BOTTOM: 5px;
	margin-left: 1px;
	MARGIN: 0px auto;
	OVERFLOW: hidden;
	WIDTH: 433px;
	POSITION: relative;
}

#vecherinfo A {
	DISPLAY: block;
	Z-INDEX: 100;
	BACKGROUND: #fff;
	COLOR: #333;
	POSITION: absolute;
	TOP: 10px;
	TEXT-DECORATION: none
}

#vecherinfo A#nev-move-left {
	LEFT: -2px
}

#vecherinfo A#nev-move-right {
	RIGHT: 5px
}

#vecherinfo .vechermod {
	OVERFLOW: hidden
}

.vechermod {
	Text-Align: left;
	MARGIN: 0px auto;
	OVERFLOW: hidden;
	WIDTH: 390px;
	ZOOM: 1;
	POSITION: relative;
	margin-left: 18px;
}