js图片循环滚动向左右两边切换效果

发布时间：2018-09-21 15:43:57 所属栏目：Asp教程来源：站长网

导读：JS图片左右切换效果的代码，我费了九牛二虎之力才把这个效果整理好。重新定义了数组。主要是为了编辑们修改方便。图片显示的宽度。对应样式中的宽度也要修改为一致。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/x

　　JS图片左右切换效果的代码，我费了九牛二虎之力才把这个效果整理好。重新定义了数组。主要是为了编辑们修改方便。图片显示的宽度。对应样式中的宽度也要修改为一致。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <link rel="stylesheet" href="http://mag.dili360.com/js/lytebox.css" type="text/css" media="screen" /> <style> *{ margin:0; padding:0} #lbCaption { display:block; font-size:12px; font-weight:100; } #img_container{ text-align:left; position:relative; margin:0 auto;border:1px solid #000; overflow:hidden;width:120px; height:159px;} #imgbox{position:absolute; width:2000px;left:0px;top:0} #imgbox img{ float:left; border:0; margin:0; width:120px; height:159px; } </style> <div id="img_container"> <div id="imgbox" style="left:0"></div> </div> <div style="text-align:center"><a href="javascript:void(0)" id="pre" >◄</a> <span id="currentnum">1</span>/<span id="allnum"></span> <a id="next" href="javascript:void(0)">►</a> </div> <script type="text/javascript"> $=function(obj){return document.getElementById(obj);} //图片显示的宽度。对应样式中的宽度也要修改为一致。 var imgWidth=120; //图片地址 var imgsrc= new Array(); imgsrc[0]="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_1.jpg"; imgsrc[1]="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_2.jpg"; imgsrc[2]="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_3.jpg"; imgsrc[3]="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_4.jpg"; //点开后大图地址 var bigimgurl= new Array(); bigimgurl[0]="http://www.veryhuo.com/uploads/common/images/liehuo_net_600x400_1.jpg"; bigimgurl[1]="http://www.veryhuo.com/uploads/common/images/liehuo_net_600x400_2.jpg"; bigimgurl[2]="http://www.veryhuo.com/uploads/common/images/liehuo_net_600x400_3.jpg"; bigimgurl[3]="http://www.veryhuo.com/uploads/common/images/liehuo_net_600x400_4.jpg"; //图片文字简介 var title= new Array(); title[0]="风景美如画"; title[1]="最爱<b>旅游</b>"; title[2]="图片文字"; title[3]="图片文字介绍"; title[4]="您的内容"; var arraylen=imgsrc.length; for (i=0; i<arraylen;i++){ var obox=$("imgbox"); var oimg=document.createElement("img"); oimg.setAttribute("src",imgsrc[i]); var oa=document.createElement("a"); oa.setAttribute("href",bigimgurl[i]); oa.setAttribute("title",title[i]); oa.setAttribute("rel","lytebox[vacation]"); oa.appendChild(oimg); obox.appendChild(oa); } $("allnum").innerHTML=imgsrc.length; $("next").onclick=function(){ var Oleft=parseInt($("imgbox").style.left); if(Oleft<=-(imgsrc.length-1)*imgWidth){Oleft=imgWidth}; $("imgbox").style.left= Oleft-imgWidth + "px"; $("currentnum").innerHTML=-parseInt($("imgbox").style.left)/imgWidth+1; } $("pre").onclick=function(){ var Oleft=parseInt($("imgbox").style.left); if(Oleft>=0){Oleft=-(imgsrc.length)*imgWidth}; $("imgbox").style.left= Oleft+imgWidth + "px"; $("currentnum").innerHTML=-parseInt($("imgbox").style.left)/imgWidth+1; } </script> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

js图片循环滚动 向左右两边切换效果

js图片循环滚动向左右两边切换效果