网页HTML轮播图代码，幻灯片代码分享

我们在做网页时，可能会需要添加轮播图代码，轮播图能够点缀网页，并能够给用户展示直观内容。而很多轮播代码不是太复杂，就是调用内部文章图片。


我这里分享一个自由设置图片的轮播图代码，代码如下：
3 i, E# q% V: a8 E
<SCRIPT>
$ ~% H; X8 [( X- ?var widths=200;
8 g8 g3 w* U) x9 P9 Y1 tvar heights=200;
var counts=3;
img1=new Image ();img1.src='/images/e1.gif';
, Q2 D" p# \6 O$ J9 s5 k% Uimg2=new Image ();img2.src='/images/e2.gif';
3 A! d7 A6 b. \& y% Uimg3=new Image ();img3.src='/images/e3.gif';
url1=new Image ();url1.src='#';
url2=new Image ();url2.src='#';
url3=new Image ();url3.src='#';
# B, X( O/ Z% }6 @$ Tvar nn=1;
var key=0;
3 U: T& U" H3 w1 s9 @6 H5 P7 }6 `function change_img()
{if(key==0){key=1;}
/ T+ i$ _( u# V) welse if(document.all)
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
eval('document.getElementById("pic").src=img'+nn+'.src');
$ c6 |* ]3 S9 D. Geval('document.getElementById("url").href=url'+nn+'.src');
3 R% e6 @: I5 g& j2 j7 _- ffor (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
document.getElementById("xxjdjj"+nn).className='bxx';
5 S! m) t, J  H7 Lnn++;if(nn>counts){nn=1;}
  N1 q+ K7 n4 `tt=setTimeout('change_img()',4000);}
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
' g( ?- K9 B: }" Y7 l$ U) ^% Fdocument.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
$ }* r& d* N( V9 X* sdocument.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
3 W7 t: P) X; p* `: C2 x; V
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
) r+ ]8 r  ^" Sdocument.write('</style>');
5 B* X+ g6 M( }# Cdocument.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url" target="_blank" rel="nofollow"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_blank">'+i+'</a>');}
document.write('</div></div>');
! g& h8 J' h' H" mchange_img();
7 y( F6 B5 c6 O" l! ]4 @) K</SCRIPT>
) O0 E) v' d* p( Y* ?
图片数量可以根据自己需要增删，图片链接也可根据自己需要修改，不仅如此，图片大小，字体颜色大小等等都可以自己修改。

这个是我没有修改过的，别人分享给我的，需要修改的自己在代码中修改即可。

使用时，直接放到需要放的位置即可。我们在做网页时，可能会需要添加轮播图代码，轮播图能够点缀网页，并能够给用户展示直观内容。而很多轮播代码不是太复杂，就是调用内部文章图片。
! r8 ?8 S% v* a  M, F
$ K- b$ n) U/ _' ?' K5 v( e7 `
% |: N- v5 ]8 `我这里分享一个自由设置图片的轮播图代码，代码如下：

% [7 j! ~5 Y5 v! K3 h1 r1 [<SCRIPT>
4 S) t, N) T7 [7 ~$ c- a, U9 pvar widths=200;
var heights=200;
var counts=3;
img1=new Image ();img1.src='/images/e1.gif';
img2=new Image ();img2.src='/images/e2.gif';
: \3 s' ]8 s; W1 Y; S' |! {img3=new Image ();img3.src='/images/e3.gif';
6 `' Q& b8 k& s- e; m" F- q8 uurl1=new Image ();url1.src='#';
8 L3 d+ k2 `( e( u4 f% Aurl2=new Image ();url2.src='#';
url3=new Image ();url3.src='#';
, `& a2 @! Y( kvar nn=1;
- y6 w" S) Z. H8 Avar key=0;
function change_img()
{if(key==0){key=1;}
: G( d& H# g* U, f7 ~* s  celse if(document.all)
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
eval('document.getElementById("pic").src=img'+nn+'.src');
eval('document.getElementById("url").href=url'+nn+'.src');
' l; F# L# y$ Ffor (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
) N- a4 _$ l0 t/ X- X7 Rdocument.getElementById("xxjdjj"+nn).className='bxx';
nn++;if(nn>counts){nn=1;}
2 z) P% b3 a/ B  t8 R8 h1 \tt=setTimeout('change_img()',4000);}
( K4 E3 s4 [' d4 Pfunction changeimg(n){nn=n;window.clearInterval(tt);change_img();}
) a0 H* X3 ?: H& q3 G  t9 T. T! Sdocument.write('<style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
7 A% c  p' v: U8 y# x  sdocument.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');

document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
& P3 z" f1 w: h; X5 _+ ldocument.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
$ I; u+ N$ g4 \. T, w& |$ f! A  ydocument.write('</style>');
6 e7 r& m; e3 B5 w5 {document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
  B3 K# n5 A9 a9 [document.write('<div><a id="url" target="_blank" rel="nofollow"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_blank">'+i+'</a>');}
document.write('</div></div>');
. N0 F* j0 g* T6 H6 rchange_img();
</SCRIPT>
1 |% t  a' @) V$ J/ J" o7 n
图片数量可以根据自己需要增删，图片链接也可根据自己需要修改，不仅如此，图片大小，字体颜色大小等等都可以自己修改。
1 ^; Z1 H) ]) s
这个是我没有修改过的，别人分享给我的，需要修改的自己在代码中修改即可。
. b* T( R% B/ o  U
使用时，直接放到需要放的位置即可。
; B! t- x. C1 [$ J