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

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


$ y5 i$ a) |1 _2 U) j我这里分享一个自由设置图片的轮播图代码，代码如下：
! k( r9 B) ~' K# l
: E7 ?4 b6 i+ @% L# p<SCRIPT>
2 h6 Z0 n- q" m2 Evar widths=200;
" i, t% a9 z2 [* g' m' b9 t1 \var heights=200;
var counts=3;
img1=new Image ();img1.src='/images/e1.gif';
3 q$ L# s) L/ v( oimg2=new Image ();img2.src='/images/e2.gif';
img3=new Image ();img3.src='/images/e3.gif';
url1=new Image ();url1.src='#';
  R* t) z& K4 Turl2=new Image ();url2.src='#';
  s& b# u/ n- t3 S2 T8 D9 Hurl3=new Image ();url3.src='#';
# L! n' f5 |* Qvar nn=1;
var key=0;
function change_img()
{if(key==0){key=1;}
! v  e7 C* c1 x! H$ j2 Xelse 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');
9 h. z* p' U  l" I" {/ X) weval('document.getElementById("url").href=url'+nn+'.src');
7 _: @5 x& m- p" Q3 f. J* k5 Wfor (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
) e( H! h; X  i/ W  E+ ]* z7 J8 ]+ F! xdocument.getElementById("xxjdjj"+nn).className='bxx';
3 U+ b& L& |8 D4 C+ k7 Hnn++;if(nn>counts){nn=1;}
tt=setTimeout('change_img()',4000);}
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
8 b' ~2 y& Z' f0 c' Y. Pdocument.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
" u0 I. S1 }  ^$ e  Ldocument.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;}');
8 e, o8 ]3 z# s; j" wdocument.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
6 |% _' s1 P2 x& r6 T
/ {0 \# ?3 P8 H4 S4 {/ q3 kdocument.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
/ x) @. Z4 ]9 A/ {% W% P7 E  j9 tdocument.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('</style>');
7 T3 {  Y& K3 a1 y/ G" _/ `- [4 v( w3 rdocument.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>');
0 a0 ^9 v% o# M# O* e* g9 [; s0 odocument.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>');}
3 r$ s8 s6 T: B4 Z/ f9 l8 ]6 [document.write('</div></div>');
change_img();
</SCRIPT>

, D7 I, z& s* O; j( u8 x图片数量可以根据自己需要增删，图片链接也可根据自己需要修改，不仅如此，图片大小，字体颜色大小等等都可以自己修改。
3 t# a& ?  y0 E. U
# A* Y1 u8 \1 D4 a8 B! V' R这个是我没有修改过的，别人分享给我的，需要修改的自己在代码中修改即可。

使用时，直接放到需要放的位置即可。我们在做网页时，可能会需要添加轮播图代码，轮播图能够点缀网页，并能够给用户展示直观内容。而很多轮播代码不是太复杂，就是调用内部文章图片。
; {7 M: R5 U* {; Z; S/ l" B* Q8 f

我这里分享一个自由设置图片的轮播图代码，代码如下：
+ ~5 x5 W# v8 m  g0 {4 S& \) \
<SCRIPT>
* _4 ^' Q7 `0 L" q9 y" Evar widths=200;
8 ~: f; g) y: p! I) uvar heights=200;
var counts=3;
, O6 P( Y$ |- I0 S& X) Q' E8 T7 K# Bimg1=new Image ();img1.src='/images/e1.gif';
img2=new Image ();img2.src='/images/e2.gif';
img3=new Image ();img3.src='/images/e3.gif';
url1=new Image ();url1.src='#';
url2=new Image ();url2.src='#';
url3=new Image ();url3.src='#';
, c$ w9 n+ y0 p. Vvar nn=1;
1 Z: ^& I# u2 |* G" xvar key=0;
function change_img()
. N/ R5 N3 z  \3 c  W3 w" i: h+ Y{if(key==0){key=1;}
else if(document.all)
, x( S: I, |# C2 [$ e{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');
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
document.getElementById("xxjdjj"+nn).className='bxx';
  [* G) A  ~" K9 ~6 T9 fnn++;if(nn>counts){nn=1;}
. s; A7 e* L- u$ |& ftt=setTimeout('change_img()',4000);}
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
document.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;}');
/ w7 n) U( j! ^$ O( H' v4 ]- c$ jdocument.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;}');
! D8 X0 n! A! {  _
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;}');
9 E4 D9 t* k7 i% Ndocument.write('</style>');
document.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>');
0 M6 c; F# Q/ g/ s; g* }. z- B) K' odocument.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>');}
3 q8 [( E9 I6 M: Kdocument.write('</div></div>');
change_img();
</SCRIPT>

$ B; y2 Z* w% Z1 K- @1 R2 a  |. q% \图片数量可以根据自己需要增删，图片链接也可根据自己需要修改，不仅如此，图片大小，字体颜色大小等等都可以自己修改。
% \8 M5 r% \+ V5 Q6 M
2 p- b2 @: l& }& A8 {3 L( w# M这个是我没有修改过的，别人分享给我的，需要修改的自己在代码中修改即可。
/ L, a1 S# h, I$ Y$ H; h; c
使用时，直接放到需要放的位置即可。
0 P$ z0 x. N4 v. @