js图片轮回转动向阁下双方切换结果

发布时间：2018-09-01 14:11:16 所属栏目：编程来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE

js图片轮回转动 向阁下双方切换结果

js图片轮回转动向阁下双方切换结果