就是下面这个效果。 主代码如下: <mce:script src="jquery-1.4.3.js" mce_src="jquery-1.4.3.js"></mce:script> <mce:script src="jquery.lazyload.js" mce_src="jquery.lazyload.js"></mce:script> <mce:script language="javascript"><!-- $(document).ready(function(){ $('#left').text($('#scroll_list > li >a:first').attr("text")); $('#view_pic').attr("src",$('#scroll_list > li >a:first').attr("href")); $('#scroll_list > li >a:first').addClass('a_click'); $('li').click(function(event){ if(this.id=='up') { $("#right_scroll").animate({scrollTop: '-=430px'}, "slow"); } if(this.id=='down') { $("#right_scroll").animate({scrollTop: '+=430px'}, "slow"); } }); $('#scroll_list > li >a').click(function(event){ var url; var txt; url=this.href; txt=this.text; $('a').removeClass('a_click'); $(this).addClass('a_click'); $("#loading").show(); $("#view_pic").lazyload({ //加载国片部分 placeholder : url, container: $("#left") }); $("#loading").hide(); $("#left").text(txt); return false; }); }); // --></mce:script> <link href="viewpic.css" mce_href="viewpic.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <ul><li> <div id="left"></div> </li></ul> <ul><li> <div id="center"><div id="loading"><img src="loading.gif" mce_src="loading.gif" width="89" height="90" /></div><center><img id="view_pic" src="" /></center></div> </li></ul> <ul><li> <div id="right"> <ul><li id="up"><a href="#" mce_href="#" title="上移"><img src="up1.png" mce_src="up1.png" width="100" height="30" /></a></li></ul> <ul><li> <div id="right_scroll"> <ul id="scroll_list"> <li><a href="img/01.jpg" mce_href="img/01.jpg" text="图片1说明:这是第一张图片的说明"><img src="img/frame-01.jpg" mce_src="img/frame-01.jpg" width="100" height="100" /></a></li> <li><a href="img/02.jpg" mce_href="img/02.jpg" text="图片2说明:这种效果是不是还可以?"><img src="img/frame-02.jpg" mce_src="img/frame-02.jpg" width="100" height="100" /></a></li> <li><a href="img/03.jpg" mce_href="img/03.jpg" text="图片3说明:"><img src="img/frame-03.jpg" mce_src="img/frame-03.jpg" width="100" height="100" /></a></li> <li><a href="img/04.jpg" mce_href="img/04.jpg" text="图片4说明:"><img src="img/frame-04.jpg" mce_src="img/frame-04.jpg" width="100" height="100" /></a></li> <li><a href="img/05.jpg" mce_href="img/05.jpg" text="图片5说明:"><img src="img/frame-05.jpg" mce_src="img/frame-05.jpg" width="100" height="100" /></a></li> <li><a href="img/06.jpg" mce_href="img/06.jpg" text="图片6说明:"><img src="img/frame-06.jpg" mce_src="img/frame-06.jpg" width="100" height="100" /></a></li> <li><a href="img/07.jpg" mce_href="img/07.jpg" text="图片7说明:"><img src="img/frame-07.jpg" mce_src="img/frame-07.jpg" width="100" height="100" /></a></li> <li><a href="img/08.jpg" mce_href="img/08.jpg" text="图片8说明:"><img src="img/frame-08.jpg" mce_src="img/frame-08.jpg" width="100" height="100" /></a></li> </ul> </div> </li></ul> <ul><li id="down"><a href="#" mce_href="#" title="下移"><img src="down1.png" mce_src="down1.png" width="100" height="30" /></a></li></ul> </div> </li></ul> </div> </body>