原生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= 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添加最后一个子节点 oimg 33 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 }
显示效果为:
然后点击下面的按钮,左边的数字也会进行增减。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。