当前位置：首页 → 问答吧 → 点击右侧小图向左侧滚动，怎样让它在最后一排图片时不滚动了..目前是一直滚动...

点击右侧小图向左侧滚动，怎样让它在最后一排图片时不滚动了..目前是一直滚动...

时间：2010-05-07

来源：互联网

<!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=utf-8" /> <title></title> <style> * { margin:0px; padding:0px; } body{background:#7c0000;} #wrapper { width:100%; background:url(../images/111.png) repeat-x; } #bigpic { height:490px; background:#FFF; padding:6px; } #bigpic img { width:100%; height:490px; overflow:hidden; } #picbox { background:#000; height:100px; margin-top:6px; padding:8px; border:2px solid #eeaa38; } #piclist { position:relative; float:left; width:890px; height:100%; overflow:hidden; } #piclist ul { position:absolute; width:9999px; left:0px; margin-top:18px; } #piclist ul li { width:79px; height:60px; margin-bottom:100px; list-style:none; float:left; margin-left:8px; display:inline; border:1px solid #FFF; } #piclist ul li img { width:79px; height:60px; cursor:pointer; } #leftbtn { float:left; width:18px; height:100px; background:transparent url('../images/left.gif') no-repeat scroll center center; margin-right:5px; } #leftbtn a { width:100%; height:100%; display:block; } #rightbtn { float:right; width:18px; height:100px; background:transparent url('../images/right.gif') no-repeat scroll center center; margin-left:5px; } #rightbtn a { width:100%; height:100%; display:block; } </style> </head> <body> <div id="wrapper"> <div style="width:960px; height:650px; margin:0px auto;"> <div id="bigpic"><img src="images/01.jpg" /></div> <div id="picbox"> <div id="leftbtn" style="background:#CCC;"></div> <div id="piclist"> <ul> <li><img src="images/01.jpg" alt="徐文迪" /></li> <li><img src="images/02.jpg" alt="郭凯" /></li> <li><img src="images/03.jpg" alt="徐文迪" /></li> <li><img src="images/04.jpg" alt="郭凯" /></li> <li><img src="images/05.jpg" alt="徐文迪" /></li> <li><img src="images/07.jpg" alt="郭凯" /></li> <li><img src="images/08.jpg" alt="徐文迪" /></li> <li><img src="images/09.jpg" alt="郭凯" /></li> <li><img src="images/10.jpg" alt="徐文迪" /></li> <li><img src="images/03.jpg" alt="徐文迪" /></li> <li><img src="images/04.jpg" alt="郭凯" /></li> <li><img src="images/05.jpg" alt="徐文迪" /></li> <li><img src="images/07.jpg" alt="郭凯" /></li> <li><img src="images/08.jpg" alt="徐文迪" /></li> <li><img src="images/09.jpg" alt="郭凯" /></li> <li><img src="images/10.jpg" alt="徐文迪" /></li> </ul> </div> <div id="rightbtn" style="background:#CCC;"></div> </div> </div> </div> <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))} ;if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]} ];e=function(){return'\\w+'} ;c=1;} ;while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('(4(){7(!0.3){0[\'3\']={}}4 $(5){1 i(5)=="h"?d.g(5):5};0[\'3\'][\'$\']=$;4 8(){1 d.j?b:c}0[\'3\'][\'8\']=8;4 6(2,9,a){7(2.f){2.f(9,a,c);1 b}k 7(2.e){2.e(\'l\'+9,a);1 b}1 c}0[\'3\'][\'6\']=6})();',22,22,'window|return|node|dier|function|id|addEvent|if|isIe|type|listener|true|false|document|attachEvent|addEventListener|getElementById|string|typeof|all|else|on'.split('|'),0,{} )) var scroll_state=''; var scroll_speed=0; var bigpic=dier.$('bigpic').getElementsByTagName('img'); var picinfomethod=dier.isIe()?'innerText':'textContent'; var piclist=dier.$('piclist').getElementsByTagName('img'); var piclistbox=dier.$('piclist').getElementsByTagName("ul"); var leftbtn=dier.$('leftbtn'); var rightbtn=dier.$('rightbtn'); //缩略图滑动事件 function pic_scroll() { var method; if(!dier.isIe()) { method=window.getComputedStyle(piclistbox[0],null); } else { method=piclistbox[0].currentStyle; } if(parseInt(method.left)>=0 && scroll_speed>0) {stop();} piclistbox[0].style.left=parseInt(method.left)+scroll_speed+"px"; if(scroll_state!='stop') { window.setTimeout(pic_scroll,10); } } //停止缩略图滑动 function stop() { scroll_state='stop'; scroll_speed=0; } //向左按钮 function leftbtn_click() { scroll_state=''; scroll_speed=4; pic_scroll(); } //向右按钮 function rightbtn_click() { scroll_state=''; scroll_speed=-4; pic_scroll(); } //缩略图点击事件 function showpic(src,alt) { return function() { bigpic[0].src=src; } } //初始化 (function initial() { //初始化左右按钮 dier.addEvent(leftbtn,'mousedown',leftbtn_click); dier.addEvent(leftbtn,'mouseup',stop); dier.addEvent(rightbtn,'mousedown',rightbtn_click); dier.addEvent(rightbtn,'mouseup',stop); //初始化缩略图点击事件 for(var i=0;i<piclist.length;i++) { dier.addEvent(piclist[i],'click',showpic(piclist[i].src,piclist[i].alt)); } //初始化大图 bigpic[0].src=piclist[0].src; })(); //自动轮换 window.setInterval(function toogle() { for(var i=0;i<piclist.length-1;i++) { if(bigpic[0].src==piclist[i].src) { bigpic[0].src=piclist[i+1].src; break; } } },8000); </script> </body> </html>
提示：您可以先修改部分代码再运行

问题：点击右侧小图向左侧滚动，怎样让它在最后一排图片时不滚动了（点击左侧图片还可向右滚动）...

[ 本帖最后由 liuyang7758 于 2010-5-7 01:50 编辑 ]

作者: liuyang7758 发布时间: 2010-05-07