100分求一个简单的js效果

效果如图
简单说明:按左---图片往左边滑动一个或多图片
按右---图片往右边滑动一个或多图片因为不知这种效果叫什么效果，所以不知如何在google里搜

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

去下一个msclass.js类库里面集成了很多方式的滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片</title>
<script language="javascript">

</script>
<style type="text/css">

</style>
</head>
<body>

<DIV class=blk_18><A onmouseup=ISL_StopUp_1() class=LeftBotton
onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);"
target=_self></A>
<DIV class=pcont id=ISL_Cont_1>
<DIV class=ScrCont>
<DIV id=List1_1><A class=pl
href="http://info.china.alibaba.com/news/detail/v3000103-d1002527920.html"
target=_blank><IMG height=72 alt=20-50元夏装抢疯
src="/upload/remot2008/20081110203750793.gif" width=96>美女小凡最新夏装</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v5000180-d1002468482.html"
target=_blank><IMG height=72 alt=韩国人气小耳环
src="/upload/remot2008/20081110203750793.gif" width=96>韩国人气小耳环</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v9-d1002531301.html"
target=_blank><IMG height=72 alt=3万6超值装修88平
src="/upload/remot2008/20081110203750793.gif" width=96>3万6超值装修88平</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v8-d1002530067.html"
target=_blank><IMG height=72 alt=牛干巴敲开财富门
src="/upload/remot2008/20081110203750793.gif" width=96>牛干巴敲开财富门</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v5003519-d1002285304.html"
target=_blank><IMG height=72 alt=4K至7K高性能本本
src="/upload/remot2008/20081110203750793.gif" width=96>4K至7K高性能本本</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v5001800-d1002511645.html"
target=_blank><IMG height=72 alt=7万装修102平婚房
src="/upload/remot2008/20081110203750793.gif" width=96>7万装修102平婚房</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v5003463-d1002527336.html"
target=_blank><IMG height=72 alt=最新小车节油为主
src="/upload/remot2008/20081110203750793.gif" width=96>最新小车节油为主</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v5003000-d1002505656.html"
target=_blank><IMG height=72 alt="热门项目 BT烤翅"
src="/upload/remot2008/20081110203750793.gif" width=96>热门项目 BT烤翅</A><A class=pl
href="http://info.china.alibaba.com/news/detail/v3000103-d1002421590.html"
target=_blank><IMG height=72 alt=流行T恤+裤装
src="/upload/remot2008/20081110203750793.gif" width=96>要显瘦就这么穿！</A> </DIV>
<DIV id=List2_1></DIV></DIV></DIV><A onmouseup=ISL_StopDown_1()
class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1()
href="javascript:void(0);" target=_self></A></DIV>
<SCRIPT type=text/javascript>

</SCRIPT>

</body>
</html>你可以搜索 “图片展示左右控制” 很多效果！
上面的那个的演示地址是：http://www.webkey.cn/code/view.asp?id=920
http://www.jz123.cn/soft/1/26/2008/2008111014165.html
搜索“横向的移动相册”
http://www.google.com/search?hl=zh-CN&lr=&newwindow=1&q=%E6%A8%AA%E5%90%91%E7%9A%84js%E7%9B%B8%E5%86%8C%E6%95%88%E6%9E%9C&revid=848746456&ei=GOxJS9HuCJeXkQWwy-T1Ag&sa=X&oi=revisions_inline&resnum=0&ct=broad-revision&cd=3&ved=0CEQQ1QIoAg
<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
<CENTER>
<p>
<h1>JS不间断循环滚动</h1><p>
  <TABLE
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
cellSpacing=0 cellPadding=0 width=750 align=center border=0>
  <TBODY>
  <TR><td width="30"><a href="#" onClick="clickdiv()" id="aa">向左</a></td>
    <TD>
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 750px; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="171" background="pic_bg.jpg"><div align="center">内容一</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容二</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容三</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容四</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容五</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容六</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容七</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容八</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容九</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容十</div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>

    </TD><td width="30"><a href="#" onClick="Rclickdiv()" id="mcc">向右</a></td></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER><SCRIPT>
var speed3=25//速度数值越大速度越慢
var t=false;
var id="aa";
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++
}
t=false;
}
function RMarquee(){
if(document.getElementById("demo").scrollLeft<=0)
  document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth
  else{
  document.getElementById("demo").scrollLeft--
  }
  t=true; }
function clickdiv(){
clearInterval(MyMar)
Marquee();
}
function Rclickdiv(){
clearInterval(MyMar)
RMarquee();
}
var MyMar=setInterval(Marquee,speed3)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}}
document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);}
document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);}
</SCRIPT>
</BODY>
http://topic.csdn.net/u/20080627/12/4b858e0a-3097-4db0-b14c-8f7fc40dd116.html
http://topic.csdn.net/u/20091215/17/ab7b5e4f-7d16-4c3e-972f-4237c09ec03a.html?29461
http://www.open-open.com/ajax/ajax20080711134716.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Imgmove</title>
<style type="text/css">
a{ background-color:#EFEBEF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none;
border-left:1px solid #EFEBEF; border-right:1px solid #EFEBEF}
a.cc{background-color:#FFFFFF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none; color:#000000; border-left:1px solid #CECBCE; border-right:1px solid #CECBCE}
a:hover{background-color:#FFFFFF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none; color:#000000}
#container{
width:976px;
}
#container span{ display: block; margin-top:20px; margin-bottom:10px;}
#left{
width:29px;
height:137px;
float:left;
background-image:url("http://album.hi.csdn.net/app_uploads/wtcsy/20090618/232729109.p.jpg");
background-position: -0px 0px;
}
#middle{
border-bottom:1px solid #CECBCE;
border-top:1px solid #CECBCE;
width:918px;
height:135px;
float:left;
background-color: #EFEBEF;
overflow:hidden;
}
#right{
width:29px;
height:137px;
float:left;
background-image:url("http://album.hi.csdn.net/app_uploads/wtcsy/20090618/232744390.p.jpg");
background-position: -29px 0px;
}
#thumblist{}
#middle img {
border:1px solid #999999;
}
</style>
</head>
<body style=" padding:10px; padding-top:150px; margin:0px; font-size:12px;">

<div id="container">
    <div id="left"></div>
    <div id="middle">
        <div id="thumblist">
    <a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/langl/thumb_sm.jpg"></span>郎朗</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/tianlm/thumb_sm.jpg"></span>田黎明</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/caizz1/thumb_sm.jpg"></span>蔡志忠（一）</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/caizz2/thumb_sm.jpg"></span>蔡志忠（二）</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/jimmy/thumb_sm.jpg"></span>幾米</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/yanbo/thumb_sm.jpg"></span>闫博</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/yangch/thumb_sm.jpg"></span>杨长槐</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/zhangdl/thumb_sm.jpg"></span>张大力</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/liujl/thumb_sm.jpg"></span>刘静兰</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/hayq/thumb_sm.jpg"></span>哈亦琦</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/tailp/thumb_sm.jpg"></span>邰立平</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/mengsf/thumb_sm.jpg"></span>孟树锋</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/xihd/thumb_sm.jpg"></span>西合道</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/yesy/thumb_sm.jpg"></span>叶水云</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/xuzc/thumb_sm.jpg"></span>徐竹初</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/tanping/thumb_sm.jpg"></span>谭平</a><a href="javascript:void(0)"><span><img src="http://www.google.cn/help/ig/art/images/themes/pangk/thumb_sm.jpg"></span>潘公凯</a>
        </div>
    </div>
    <div id="right"></div>
</div>

<script type="text/javascript">
document.all&&document.execCommand("BackgroundImageCache", false, true); var isIE = (document.all) ? true : false;var $ = function (id) {
return  document.getElementById(id);
};var Extend = function(destination, source) {
for (var property in source) {
  destination[property] = source[property];
}
}var Bind = function(object, fun,args) {
return function() {
  return fun.apply(object,args||[]);
}
}var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
  return fun.apply(object, [event || window.event].concat(args));
}
}var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}var Tween = {
    Quart: {
            easeOut: function(t,b,c,d){
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
            }
        }
} function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}; var Class = function(properties){
       var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
       _class.prototype = properties;
       return _class;
};var  Imgroll =new Class({
options:{
Isrun   : false,
Step    : 100,
Time    : 10,
t       : 0,
b       : 0,
c       : 0,
d       : 60,
Tween   : Tween.Quart.easeOut,
Oninit  : function(){},
Onstart : function(){},
Onstop  : function(){}
},
initialize:function(obj,c,total,i,options){
this._obj   = obj;
this._c     = c;
this._total  = total;    //显示区域有多少张图片
this.i      = i ;        //聚焦于第i张图片
this.timer  = null;
this.Isrun  = this.options.isrun;
this.Step   = this.options.Step;
this.Time   = this.options.Time;
this.t      = this.options.t;
this.b      = this.options.b;
this.c      = this.options.c;
this.d      = this.options.d;
this.Tween  = this.options.Tween;
this.Oninit = this.options.Oninit;
this.Onstart= this.options.Onstart;
this.Onstop = this.options.Onstop;
Extend(this,options||{});
var self =this, i = 0,img = this._c.getElementsByTagName('a');
this._c.style.width = img.length*this.Step+'px';
for(;i<img.length;i++)
{
img[i].num = i;
(function(i){
addListener(img[i],'click',Bind(self,self.Start,[img[i]]));
})(i);
}
},
Start:function(c){
if(this.Isrun)return;
this.Isrun = true;
var img = this._c.getElementsByTagName('a')
this.b     = this._obj.scrollLeft;
c&&(this.c = c.num<this.i?(-1)*this.b:(c.num>img.length-(this._total-this.i+1)-1?(img.length - this._total)*this.Step - this.b:(c.num-this.i+1)*this.Step-this.b));
this.Onstart(c);
if(this.c==0){this.Isrun=false;return;}
this.Run();
},
Run:function(){
if(this.t<this.d)
{
this.RunTo(Math.round(this.Tween(++this.t,this.b,this.c,this.d)))
this.timer = setTimeout(Bind(this,this.Run),this.Time)
}
else
{
this.RunTo(this.b+this.c);
this.Stop();
}
},
RunTo:function(i){
this._obj.scrollLeft = i;
},
Pre:function(){
this.c = this.Step*(-1);
this.Start();
},
Next:function(){
this.c = this.Step;
this.Start();
},
Stop:function(){
clearTimeout(this.timer);
this.t = 0;this.Isrun=false;
this.Onstop()
}
}) var ss = new Imgroll($('middle'),$('thumblist'),9,5,{
        Step:102,
Onstart:function(obj){
if(!obj)return;
this.o&&(this.o.className='');
this.o=obj;
obj.className ='cc';
    },
Onstop:function(){
$('left').style.backgroundPosition=this._obj.scrollLeft == 0?"0px 0px":"-29px 0px";
$('right').style.backgroundPosition=this._obj.scrollLeft== 816?"0px 0px":"-29px 0px";
     }});
addListener($('right'),'click',function(){ss.Next()});
addListener($('left'),'click',function(){ss.Pre()});
function sss(num){
ss.i=num;
$('nn').innerHTML = "聚焦第"+num+"个"
}
</script>
</body>
</html>
那种效果叫 carousel：http://www.google.com/search?hl=en&newwindow=1&q=javascript+carousel&aq=f&oq=&aqi=g-e1g-c2g5g-c1g1===================================================
ASP.NET WebForm和ASP.NET MVC分页最终解决之道
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="懒人图库" />
<title>横向的JS相册效果</title>
<style>
body {background:#000;margin:0;font:12px Verdana;text-align:center;}
#tbody {width:650px;margin:20px auto;text-align:left;}
#mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px}
#mainphoto {cursor:pointer;display:block;}
#goleft {float:left;clear:left;margin:6px 5px 0 3px;}
#goright {float:right;clear:right;margin:6px 3px 0 5px;}
#photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}
#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}
.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;}
</style>
</head>
<body>
<div id="tbody"><span class="txt_1">横向的JS相册效果</span>
<div id="mainbody">
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="640" height="400" id="mainphoto" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
</div>
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/goleft.gif" width="11" height="56" id="goleft" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/goright.gif" width="11" height="56" id="goright" />
<div id="photos">
<div id="showArea">

<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name="http://www.makewing.com" />
<img src="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="懒人图库" width="80" height="50" rel="http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name="http://www.makewing.com" />
</div>
</div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var browse = window.navigator.appName.toLowerCase();
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var minOpa = 50; //滤镜最小值
var maxOpa = 100; //滤镜最大值
var spa = 2; //缩略图区域补充数值
var w = 0;
spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec*10 : spec*20);
function $(e) {return document.getElementById(e);}
function goleft() {$('photos').scrollLeft -= spec;}
function goright() {$('photos').scrollLeft += spec;}
function setOpacity(e, n) {
if (browse.indexOf("microsoft") > -1) e.style.filter = 'alpha(opacity=' + n + ')';
else e.style.opacity = n/100;
}
$('goleft').style.cursor = 'pointer';
$('goright').style.cursor = 'pointer';
$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa);}
$('mainphoto').onmouseout = function() {setOpacity(this, minOpa);}
$('mainphoto').onclick = function() {location = this.getAttribute('name');}
$('goleft').onmouseover = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goleft2.gif'; MyMar=setInterval(goleft, speed);}
$('goleft').onmouseout = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goleft.gif'; clearInterval(MyMar);}
$('goright').onmouseover = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goright2.gif'; MyMar=setInterval(goright,speed);}
$('goright').onmouseout = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goright.gif'; clearInterval(MyMar);}
window.onload = function() {
setOpacity($('mainphoto'), minOpa);
var rHtml = '';
var p = $('showArea').getElementsByTagName('img');
for (var i=0; i<p.length; i++) {
w += parseInt(p[i].getAttribute('width')) + spa;
setOpacity(p[i], minOpa);
p[i].onclick = function() {location = this.getAttribute('name');}
p[i].onmouseover = function() {
setOpacity(this, maxOpa);
$('mainphoto').src = this.getAttribute('rel');
$('mainphoto').setAttribute('name', this.getAttribute('name'));
setOpacity($('mainphoto'), maxOpa);
}
p[i].onmouseout = function() {
setOpacity(this, minOpa);
setOpacity($('mainphoto'), minOpa);
}
rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />';
}
$('showArea').style.width = parseInt(w) + 'px';
var rLoad = document.createElement("div");
$('photos').appendChild(rLoad);
rLoad.style.width = "1px";
rLoad.style.height = "1px";
rLoad.style.overflow = "hidden";
rLoad.innerHTML = rHtml;
}
</script>
LZ你打开的的网页里应该有源码吧，js又不能codehidn
可实现,GOOGLE上也有很多,自己找找就有了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片 </title>
<script language="javascript">

</script>
<style type="text/css">

</style>
</head>
<body>

<DIV class=blk_18> <A onmouseup=ISL_StopUp_1() class=LeftBotton
onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);"
target=_self> </A>
<DIV class=pcont id=ISL_Cont_1>
<DIV class=ScrCont>
<DIV id=List1_1>  <A class=pl
href="http://info.china.alibaba.com/news/detail/v3000103-d1002527920.html"
target=_blank> <IMG height=72 alt=20-50元夏装抢疯
src="/upload/remot2008/20081110203750793.gif" width=96>美女小凡最新夏装 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v5000180-d1002468482.html"
target=_blank> <IMG height=72 alt=韩国人气小耳环
src="/upload/remot2008/20081110203750793.gif" width=96>韩国人气小耳环 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v9-d1002531301.html"
target=_blank> <IMG height=72 alt=3万6超值装修88平
src="/upload/remot2008/20081110203750793.gif" width=96>3万6超值装修88平 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v8-d1002530067.html"
target=_blank> <IMG height=72 alt=牛干巴敲开财富门
src="/upload/remot2008/20081110203750793.gif" width=96>牛干巴敲开财富门 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v5003519-d1002285304.html"
target=_blank> <IMG height=72 alt=4K至7K高性能本本
src="/upload/remot2008/20081110203750793.gif" width=96>4K至7K高性能本本 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v5001800-d1002511645.html"
target=_blank> <IMG height=72 alt=7万装修102平婚房
src="/upload/remot2008/20081110203750793.gif" width=96>7万装修102平婚房 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v5003463-d1002527336.html"
target=_blank> <IMG height=72 alt=最新小车节油为主
src="/upload/remot2008/20081110203750793.gif" width=96>最新小车节油为主 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v5003000-d1002505656.html"
target=_blank> <IMG height=72 alt="热门项目 BT烤翅"
src="/upload/remot2008/20081110203750793.gif" width=96>热门项目 BT烤翅 </A> <A class=pl
href="http://info.china.alibaba.com/news/detail/v3000103-d1002421590.html"
target=_blank> <IMG height=72 alt=流行T恤+裤装
src="/upload/remot2008/20081110203750793.gif" width=96>要显瘦就这么穿！ </A>  </DIV>
<DIV id=List2_1> </DIV> </DIV> </DIV> <A onmouseup=ISL_StopDown_1()
class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1()
href="javascript:void(0);" target=_self> </A> </DIV>
<SCRIPT type=text/javascript>

</SCRIPT>

</body>
</html>