我们在做网页时，可能会需要添加轮播图代码，轮播图能够点缀网页，并能够给用户展示直观内容。而很多轮播代码不是太复杂，就是调用内部文章图片。) i4 F1 m0 M0 I
_7 g( I1 k9 l0 ^, h
$ w% J+ X2 d$ q* L
我这里分享一个自由设置图片的轮播图代码，代码如下：
# A, C* T4 X6 R2 E; U3 e& x
1 h) ]5 `+ a9 Q& r# i3 ]<SCRIPT>1 c; q8 J5 D: P% d/ e- Z5 L$ ?
var widths=200; ) f7 z8 A0 m9 J' t
var heights=200;
5 r' m! x% L9 ]9 J. Wvar counts=3;
( L! a: [% }* }. g" [+ |$ Dimg1=new Image ();img1.src='/images/e1.gif'; ' h2 i. @8 J( X+ w
img2=new Image ();img2.src='/images/e2.gif'; 0 a/ }& M; C$ F
img3=new Image ();img3.src='/images/e3.gif';
+ @3 K: ?! ?2 u; E3 u" m& E1 ourl1=new Image ();url1.src='#';
. c0 B; V: [, L% [2 b! e2 n/ Surl2=new Image ();url2.src='#';% S+ ?+ d& O: v, O: s
url3=new Image ();url3.src='#';
1 u. x7 K! V# Q+ k. m! ovar nn=1;
5 `9 g7 s$ T0 fvar key=0;, n& m0 q* c# a; `; j! L9 ^
function change_img()1 b/ O7 F$ e% ?: I
{if(key==0){key=1;}
! |3 {9 _) d% u$ @) v9 G0 _( j. Felse if(document.all)5 O, H% V8 k+ E% |9 @
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
3 S3 C5 Q( `6 y" I2 G: u Neval('document.getElementById("pic").src=img'+nn+'.src');6 B( ?: X% p8 q0 M3 U
eval('document.getElementById("url").href=url'+nn+'.src');
% O$ ]: d) ^. F( W$ Gfor (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}- `" z/ b: F( Q3 h/ h# A- K
document.getElementById("xxjdjj"+nn).className='bxx';
! h) u5 \; @' |& @0 Hnn++;if(nn>counts){nn=1;}
- n/ t2 t9 j: b! C$ M1 Wtt=setTimeout('change_img()',4000);}
. |& R3 J" s3 N$ a# Cfunction changeimg(n){nn=n;window.clearInterval(tt);change_img();}7 S Z1 w; H. u) P1 {
document.write('<style>');" @0 H( k) N/ d7 W. A
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');8 b6 [9 @' C5 @8 Y: d& [5 F: q4 N
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');" `+ d+ ?# o! }6 H
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
, V! _' |; P. i5 q" _( W5 @4 }document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
5 N/ `. Q+ o& Q- w h6 k4 d N# i# G6 s; v p& {9 y( G% [
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
- }- [4 U3 U: j, C1 z0 rdocument.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');, R/ Y. C0 X& j0 T5 ~
document.write('</style>');' p* P" ^+ b0 y% p- x9 T
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');8 ~$ k6 P/ S3 D- [* e! k0 G1 n
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>');1 ~ J% n! U$ D0 C" q3 _ H; S
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;">');! b7 [% ?4 K3 v! m
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_blank">'+i+'</a>');}
9 p% H; S0 o6 F. X% {document.write('</div></div>');
2 d) @. n2 C9 } g, {change_img();
" D: m) j7 e' [! v) u5 L3 W</SCRIPT>
/ \; }( d2 F4 \$ _
+ E' m4 c7 q& P1 v图片数量可以根据自己需要增删，图片链接也可根据自己需要修改，不仅如此，图片大小，字体颜色大小等等都可以自己修改。+ |0 A( O* c" n1 D& H+ n" ]
- ~& S5 A; X' M: @! ?! q6 d. ~5 F0 Y这个是我没有修改过的，别人分享给我的，需要修改的自己在代码中修改即可。
, O+ _0 l8 f7 [3 k# q5 ~0 N
* c/ ]' K+ E8 Q' r# z8 A0 `使用时，直接放到需要放的位置即可。我们在做网页时，可能会需要添加轮播图代码，轮播图能够点缀网页，并能够给用户展示直观内容。而很多轮播代码不是太复杂，就是调用内部文章图片。
3 q- o! E! v2 H6 M/ }3 t ( G+ H" y* \0 ^
- B/ H5 ?% W! Z
我这里分享一个自由设置图片的轮播图代码，代码如下：5 ~$ |0 e) i" s/ u/ }3 M7 M
+ \ T/ n: _* g; w G6 C" \<SCRIPT>0 Z, X! s5 S( E# u; b3 y( g; Q
var widths=200; 9 m$ ^; {) b0 X0 x- D+ T
var heights=200; 9 O$ R! l, z( P+ ?; I& o
var counts=3;
, v2 u1 t9 }/ d- a7 uimg1=new Image ();img1.src='/images/e1.gif'; 9 z$ x L, a$ \3 i
img2=new Image ();img2.src='/images/e2.gif';
% q8 b( o9 k- n( K( }+ [9 Jimg3=new Image ();img3.src='/images/e3.gif';
& d- Y6 e4 {0 p, s; kurl1=new Image ();url1.src='#';
8 b( P; |8 T/ h3 q2 yurl2=new Image ();url2.src='#';' k, C. X! r- S. }2 R
url3=new Image ();url3.src='#';
+ Y3 `; z8 S1 o1 j4 _. z8 @( ~var nn=1;
4 A$ g1 F& @) C& }var key=0;+ g( \* ]) q+ A4 D" B1 J0 b" v
function change_img()/ Z; ^+ h& ?) o% a9 x
{if(key==0){key=1;}/ W$ w1 j' o, b4 r: Q! {
else if(document.all)
" ?$ y" u6 g! h{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}5 n0 N$ M' G- N: p8 ]# l
eval('document.getElementById("pic").src=img'+nn+'.src');+ r ]! R9 O' z2 j; P
eval('document.getElementById("url").href=url'+nn+'.src');/ o+ U7 N1 z6 q5 J$ L9 m% M4 |* B
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}; e. x8 ?( _- Z% Y
document.getElementById("xxjdjj"+nn).className='bxx';; z0 f4 ^/ ?( j
nn++;if(nn>counts){nn=1;}
- J) `3 h: h1 l E* }tt=setTimeout('change_img()',4000);}0 e6 ?% @1 O8 R" _( c' l, ?0 D
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
2 [1 V# d7 m$ C/ D/ D/ { rdocument.write('<style>');
4 T% w5 p/ x7 P( N& i0 `: zdocument.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
: w5 y4 g9 r0 l2 M5 e8 C+ `! rdocument.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
$ L* A, v9 ?( G7 q& Bdocument.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');4 P0 n7 M L- R# y0 |. J- E( |+ ?4 E
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');# r5 N8 K* q+ {5 _/ x0 C, r7 J+ m. d
# T3 U3 G! j2 A& h! t6 ?
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
4 {4 t8 c8 y5 X7 V% C `document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');" h2 _' Q9 p5 h) Z( J
document.write('</style>');
$ V" b5 l! O9 d5 @document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');. ~" f7 N7 h9 z$ w+ w( i! d
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>');
+ u# z: X8 w6 A+ a1 B3 Udocument.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;">');
9 r% T0 J1 C) q5 {! c, _: Jfor(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_blank">'+i+'</a>');}, y7 c4 E+ {( d6 B+ U1 B! b
document.write('</div></div>');
! i( Y8 t3 p5 _* W3 H7 hchange_img();$ p3 t7 S F2 I+ l) g6 s" h
</SCRIPT>
: i+ M' _6 l( \7 s+ |' d$ m; N
# N) w' b6 J. `: g1 W% Z* o图片数量可以根据自己需要增删，图片链接也可根据自己需要修改，不仅如此，图片大小，字体颜色大小等等都可以自己修改。1 A$ r. ^! o& ^6 R$ S+ K! v
* A$ ]' j" j- t+ V
这个是我没有修改过的，别人分享给我的，需要修改的自己在代码中修改即可。' S. x+ `! I% e9 r4 \
7 F9 J; {0 h! @, N, Q# _& N. Z5 t/ a使用时，直接放到需要放的位置即可。
# ?' ]5 u, x3 w/ I3 q, F5 Q8 o- t
t# P. ?3 q8 Z4 l9 ~& M! Q3 D |
发表于 2023-12-12 15:45:34