可左右平滑滚动的产品展示效果

<!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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0A%3C!--%20%0D%0A%2F%2F%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8%E5%88%97%E8%A1%A8%20mengjia%20070927%20%0D%0Avar%20Speed_1%20%3D%2010%3B%20%2F%2F%E9%80%9F%E5%BA%A6(%E6%AF%AB%E7%A7%92)%20%0D%0Avar%20Space_1%20%3D%2020%3B%20%2F%2F%E6%AF%8F%E6%AC%A1%E7%A7%BB%E5%8A%A8(px)%20%0D%0Avar%20PageWidth_1%20%3D%20116%20*%203%3B%20%2F%2F%E7%BF%BB%E9%A1%B5%E5%AE%BD%E5%BA%A6%20%0D%0Avar%20interval_1%20%3D%207000%3B%20%2F%2F%E7%BF%BB%E9%A1%B5%E9%97%B4%E9%9A%94%20%0D%0Avar%20fill_1%20%3D%200%3B%20%2F%2F%E6%95%B4%E4%BD%93%E7%A7%BB%E4%BD%8D%20%0D%0Avar%20MoveLock_1%20%3D%20false%3B%20%0D%0Avar%20MoveTimeObj_1%3B%20%0D%0Avar%20MoveWay_1%3D%22right%22%3B%20%0D%0Avar%20Comp_1%20%3D%200%3B%20%0D%0Avar%20AutoPlayObj_1%3Dnull%3B%20%0D%0Afunction%20GetObj(objName)%7Bif(document.getElementById)%7Breturn%20eval('document.getElementById(%22'%2BobjName%2B'%22)')%7Delse%7Breturn%20eval('document.all.'%2BobjName)%7D%7D%20%0D%0Afunction%20AutoPlay_1()%7BclearInterval(AutoPlayObj_1)%3BAutoPlayObj_1%3DsetInterval('ISL_GoDown_1()%3BISL_StopDown_1()%3B'%2Cinterval_1)%7D%20%0D%0Afunction%20ISL_GoUp_1()%7Bif(MoveLock_1)return%3BclearInterval(AutoPlayObj_1)%3BMoveLock_1%3Dtrue%3BMoveWay_1%3D%22left%22%3BMoveTimeObj_1%3DsetInterval('ISL_ScrUp_1()%3B'%2CSpeed_1)%3B%7D%20%0D%0Afunction%20ISL_StopUp_1()%7Bif(MoveWay_1%20%3D%3D%20%22right%22)%7Breturn%7D%3BclearInterval(MoveTimeObj_1)%3Bif((GetObj('ISL_Cont_1').scrollLeft-fill_1)%25PageWidth_1!%3D0)%7BComp_1%3Dfill_1-(GetObj('ISL_Cont_1').scrollLeft%25PageWidth_1)%3BCompScr_1()%7Delse%7BMoveLock_1%3Dfalse%7D%20%0D%0AAutoPlay_1()%7D%20%0D%0Afunction%20ISL_ScrUp_1()%7Bif(GetObj('ISL_Cont_1').scrollLeft%3C%3D0)%7BGetObj('ISL_Cont_1').scrollLeft%3DGetObj('ISL_Cont_1').scrollLeft%2BGetObj('List1_1').offsetWidth%7D%20%0D%0AGetObj('ISL_Cont_1').scrollLeft-%3DSpace_1%7D%20%0D%0Afunction%20ISL_GoDown_1()%7BclearInterval(MoveTimeObj_1)%3Bif(MoveLock_1)return%3BclearInterval(AutoPlayObj_1)%3BMoveLock_1%3Dtrue%3BMoveWay_1%3D%22right%22%3BISL_ScrDown_1()%3BMoveTimeObj_1%3DsetInterval('ISL_ScrDown_1()'%2CSpeed_1)%7D%20%0D%0Afunction%20ISL_StopDown_1()%7Bif(MoveWay_1%20%3D%3D%20%22left%22)%7Breturn%7D%3BclearInterval(MoveTimeObj_1)%3Bif(GetObj('ISL_Cont_1').scrollLeft%25PageWidth_1-(fill_1%3E%3D0%3Ffill_1%3Afill_1%2B1)!%3D0)%7BComp_1%3DPageWidth_1-GetObj('ISL_Cont_1').scrollLeft%25PageWidth_1%2Bfill_1%3BCompScr_1()%7Delse%7BMoveLock_1%3Dfalse%7D%20%0D%0AAutoPlay_1()%7D%20%0D%0Afunction%20ISL_ScrDown_1()%7Bif(GetObj('ISL_Cont_1').scrollLeft%3E%3DGetObj('List1_1').scrollWidth)%7BGetObj('ISL_Cont_1').scrollLeft%3DGetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth%7D%20%0D%0AGetObj('ISL_Cont_1').scrollLeft%2B%3DSpace_1%7D%20%0D%0Afunction%20CompScr_1()%7Bif(Comp_1%3D%3D0)%7BMoveLock_1%3Dfalse%3Breturn%7D%20%0D%0Avar%20num%2CTempSpeed%3DSpeed_1%2CTempSpace%3DSpace_1%3Bif(Math.abs(Comp_1)%3CPageWidth_1%2F2)%7BTempSpace%3DMath.round(Math.abs(Comp_1%2FSpace_1))%3Bif(TempSpace%3C1)%7BTempSpace%3D1%7D%7D%20%0D%0Aif(Comp_1%3C0)%7Bif(Comp_1%3C-TempSpace)%7BComp_1%2B%3DTempSpace%3Bnum%3DTempSpace%7Delse%7Bnum%3D-Comp_1%3BComp_1%3D0%7D%20%0D%0AGetObj('ISL_Cont_1').scrollLeft-%3Dnum%3BsetTimeout('CompScr_1()'%2CTempSpeed)%7Delse%7Bif(Comp_1%3ETempSpace)%7BComp_1-%3DTempSpace%3Bnum%3DTempSpace%7Delse%7Bnum%3DComp_1%3BComp_1%3D0%7D%20%0D%0AGetObj('ISL_Cont_1').scrollLeft%2B%3Dnum%3BsetTimeout('CompScr_1()'%2CTempSpeed)%7D%7D%20%0D%0Afunction%20picrun_ini()%7B%20%0D%0AGetObj(%22List2_1%22).innerHTML%3DGetObj(%22List1_1%22).innerHTML%3B%20%0D%0AGetObj('ISL_Cont_1').scrollLeft%3Dfill_1%3E%3D0%3Ffill_1%3AGetObj('List1_1').scrollWidth-Math.abs(fill_1)%3B%20%0D%0AGetObj(%22ISL_Cont_1%22).onmouseover%3Dfunction()%7BclearInterval(AutoPlayObj_1)%7D%20%0D%0AGetObj(%22ISL_Cont_1%22).onmouseout%3Dfunction()%7BAutoPlay_1()%7D%20%0D%0AAutoPlay_1()%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E4%BA%A7%E5%93%81%E5%B1%95%E7%A4%BA%E6%BB%9A%E5%8A%A8%E5%9B%BE%E7%89%87%E7%BB%93%E6%9D%9F%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> 
<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);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" 
target=_self></A> 
<DIV class=pcont id=ISL_Cont_1> 
<DIV class=ScrCont> 
<DIV id=List1_1><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=20-50元夏装抢疯 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>美女小凡最新夏装</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=韩国人气小耳环 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>韩国人气小耳环</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=3万6超值装修88平 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>3万6超值装修88平</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=牛干巴敲开财富门 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>牛干巴敲开财富门</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=4K至7K高性能本本 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>4K至7K高性能本本</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=7万装修102平婚房 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>7万装修102平婚房</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=最新小车节油为主 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>最新小车节油为主</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt="热门项目 BT烤翅" 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.gif" width=96>热门项目 BT烤翅</A><A class=pl 
href="http://www.lanrentuku.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.lanrentuku.com%2F" 
target=_blank><IMG height=72 alt=流行T恤+裤装 
src="http://files.glzy8.com/upload/20090330141745578.gif" _ewebeditor_ta_src="http%3A%2F%2Ffiles.glzy8.com%2Fupload%2F20090330141745578.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);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" target=_self></A></DIV> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20type%3Dtext%2Fjavascript%3E%20%0D%0A%3C!--%20%0D%0Apicrun_ini()%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2FSCRIPT%3E"> 
 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程