JS图片左右切换效果

费了九牛二虎之力才把这个效果整理好。重新定义了数组。主要是为了编辑们修改方便。

 

◄ 1/    ►

代码

<! 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" > &#9668; </ a > < span
id ="currentnum" > 1 </ span > / < span id ="allnum" ></ span > &nbsp; < a id ="next"
href ="javascript:void(0)" > &#9658; </ a >
</ div >
< script type ="text/javascript" >
$ = function (obj){ return document.getElementById(obj);}
// 图片显示的宽度。对应样式中的宽度也要修改为一致。
var imgWidth = 120 ;

// 图片地址
var imgsrc = new Array();
imgsrc[ 0 ] = " http://mag.dili360.com/ezine/magdata/cover/037/1275297932_t37.jpg " ;
imgsrc[ 1 ] = " http://mag.dili360.com/ezine/magdata/cover/033/1272619385_t33.jpg " ;
imgsrc[ 2 ] = " http://mag.dili360.com/ezine/magdata/cover/031/1270049471_t31.jpg " ;
imgsrc[ 3 ] = " http://mag.dili360.com/ezine/magdata/cover/027/1267342032_t27.jpg " ;


// 点开后大图地址
var bigimgurl = new Array();
bigimgurl[ 0 ] = " http://mag.dili360.com/ezine/magdata/cover/037/1275297932_37.jpg " ;
bigimgurl[ 1 ] = " http://mag.dili360.com/ezine/magdata/cover/033/1272619385_33.jpg " ;
bigimgurl[ 2 ] = " http://mag.dili360.com/ezine/magdata/cover/031/1270049471_31.jpg " ;
bigimgurl[ 3 ] = " http://mag.dili360.com/ezine/magdata/cover/027/1267342032_27.jpg " ;

// 图片文字简介
var title = new Array();
title[ 0 ] = " 文字介绍111111111 " ;
title[ 1 ] = " 文字介绍2 " ;
title[ 2 ] = " 图片文字介绍3 " ;
title[ 3 ] = " 图片文字介绍444444 " ;
title[ 4 ] = " 图片文字介绍5555555555 " ;
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 >

 

转载于:https://www.cnblogs.com/yaojaa/archive/2010/06/25/1765300.html