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 : }};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="#" ><imgsrc="../images/left.jpg"border="0" height="70"></a> <div class="mod"><ul style="position: relative; left: 0px; top: 2px;" id="themes"><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="highlightit" href="#"><div class="divhighlightit"><img src="../images/car.jpg" /></div></a></li><li><aclass="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;}
页:
[1]