首页 > 代码库 > 原生js实现的图片左右切换
原生js实现的图片左右切换
效果比较单一，就是两个左右按钮，点击图片就会切换，图片是用js添加的。
上代码：
html:
1 <div id="img_container">2 <div id="imgbox" style="left:0"></div>3 </div>4 <div style="text-align:center"><a href="javascript:void(0)" id="pre" >◄</a> <span 5 id="currentnum">1</span>/<span id="allnum"></span> <a id="next" 6 href="javascript:void(0)">►</a> 7 </div>
css:
1 *{ margin:0; padding:0}2 #img_container{ text-align:left; position:relative; margin:0 auto;border:1px solid #000; overflow:hidden;width:120px; height:159px;}3 #imgbox{position:absolute; width:2000px;left:0px;top:0;}4 #imgbox img{ float:left; border:0; margin:0; width:120px; height:159px; }
js：
1 var $=function(obj){return document.getElementById(obj);} //把函数看做对象，声明一个函数其实就是建立一个对象。 2 //图片显示的宽度。对应样式中的宽度也要修改为一致。 3 var imgWidth=120; 4 //图片地址 5 var imgsrc= http://www.mamicode.com/new Array(); 6 imgsrc[0]="wall_s1.jpg"; 7 imgsrc[1]="wall_s2.jpg"; 8 imgsrc[2]="wall_s3.jpg"; 9 imgsrc[3]="wall_s4.jpg";10 //点开后大图地址11 var bigimgurl= new Array();12 bigimgurl[0]="wall1.jpg";13 bigimgurl[1]="wall2.jpg";14 bigimgurl[2]="wall3.jpg";15 bigimgurl[3]="wall4.jpg";16 //图片文字简介17 var title= new Array();18 title[0]="风景美如画";19 title[1]="最爱旅游";20 title[2]="图片文字";21 title[3]="图片文字介绍";22 title[4]="您的内容";23 var arraylen=imgsrc.length;24 for (i=0; i<arraylen;i++){25 var obox=$("imgbox");26 var oimg=document.createElement("img");27 oimg.setAttribute("src",imgsrc[i]);28 var oa=document.createElement("a");29 oa.setAttribute("href",bigimgurl[i]);30 oa.setAttribute("title",title[i]);31 oa.setAttribute("rel","lytebox[vacation]");32 oa.appendChild(oimg); //为oa添加最后一个子节点 oimg33 obox.appendChild(oa); //为obox添加最后一个子节点 oa，其实就是把图片放进存放图片的盒子里面34 }35 $("allnum").innerHTML=imgsrc.length;36 $("next").onclick=function(){37 var Oleft=parseInt($("imgbox").style.left);38 if(Oleft<=-(imgsrc.length-1)*imgWidth){Oleft=120};39 $("imgbox").style.left= Oleft-imgWidth + "px";40 $("currentnum").innerHTML=-parseInt($("imgbox").style.left)/imgWidth+1;41 }42 $("pre").onclick=function(){43 var Oleft=parseInt($("imgbox").style.left);44 if(Oleft>=0){Oleft=-(imgsrc.length)*imgWidth};45 $("imgbox").style.left= Oleft+imgWidth + "px";46 $("currentnum").innerHTML=-parseInt($("imgbox").style.left)/imgWidth+1;47 }
显示效果为：
然后点击下面的按钮，左边的数字也会进行增减。
原生js实现的图片左右切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。