请选择 进入手机版 | 继续访问电脑版

福清高山网

  • 1535-9999-891
  • 为高山居民提供便捷生活需求
搜索
猜你喜欢
查看: 15|回复: 0

轮播图片代码

[复制链接]
  • TA的每日心情
    开心
    2018-3-13 19:18
  • 签到天数: 14 天

    [LV.3]偶尔看看II

    528

    主题

    524

    帖子

    356

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    356
    QQ
    发表于 2017-11-13 01:52:49 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    立即注册 已有账号?点击登录 或者 用QQ帐号登录

    x
    1. , i, F  @8 M/ g" [$ @
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      ; R) k. S4 b$ g
    3. <html xmlns="https://www.w3.org/1999/xhtml">
      / V$ r& n1 ?9 s0 E9 G! N* ], d
    4. <head>
      - Y- r: U) `5 y6 m* F9 K- P$ R4 a
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        v+ P7 n2 W% s
    6. <title>图片轮播 - javascript - </title>$ b. r+ J( z/ _: Z# q: `
    7. </head>, ^1 x. z' m6 Z2 ~( d% D9 K
    8. ' @4 q8 J0 v3 K' Q8 _7 V( }
    9. <body>
      ' X1 o6 t2 y9 T& T. W
    10. <script language="javascript" src="pic.js"></script>2 o7 ~; E5 g: g8 y4 Z4 M
    11. <script language="javascript" >
      8 L6 C7 G1 Y, L% |
    12. var da=[];
      7 G  N/ C* |% y+ B" K
    13. * s" g0 d& T7 P9 F# l: ^! n$ t3 T- Q: I
    14. da.push({src:"1353478150_9901_4752.jpg",name:"第一张",link:"https://www.gaoshan.net/"});/ H5 B! R$ Q1 U* m6 O: X" [2 ^
    15. da.push({src:"1353478162_8546_6161.jpg",name:"第二张",link:"https://www.gaoshan.net/"});* k0 o) x3 f* t2 z
    16. da.push({src:"1353478182_8116_1748.jpg",name:"第四张",link:"https://www.gaoshan.net/"});0 E; x! Z% g0 ?: i* T
    17. da.push({src:"1358475420_6324_6343.jpg",name:"第五张",link:"https://www.gaoshan.net/"});! q+ X: O! n/ d# s. @- o4 m* c
    18. da.push({src:"1353722374_2092_5298.jpg",name:"第六张",link:"https://www.gaoshan.net/"});
      " G  Y: K' e! M4 Q

    19. . t3 d/ j9 i# b/ [+ N7 K& p
    20. var c={4 I. S% ^/ \. L3 D
    21.          bg:"#333",//右下数字背景颜色% V* l6 C* d1 J6 j  H* Q
    22.          color:"#FFF",//右下数字颜色# J. G% g% b; Z! w7 p1 P
    23.          cbg:"#FFF",//右下当前数字背景颜色
      ) r, U$ z' t" N
    24.          ccolor:"#333",//右下当前数字颜色, ~& `6 ~( [' K) d% c2 T
    25.          bc:"#ccc",//边框颜色
      1 c; s$ D# Y: S& m
    26.          step:6000 //步长/ }) t5 n5 A8 H8 H$ C  W+ w% m
    27.         }
      , G- Q% K. t# E) F7 N
    28. new IMGS("TopI",600,430,da,c);$ {" _! ]8 L# ^% p& r6 ?8 R
    29. //new IMGS("id号随便写不要和页面的id重复就可以",宽度,高度,数据[,设置]);
      ; X/ d( q& G! S+ w
    30. </script>9 [! \, H# U  [# j8 t
    31. 5 `$ X- q. Q' m0 d- ^( _
    32. </body>* B, I% r' [0 w( |
    33. </html>
    复制代码
    5 W2 w8 G6 j: }

    % R- j6 ~% u& \( p7 g0 Z$ e4 x5 P" p# i9 r/ |
    添加JS后缀文件
      N8 u6 b) N: \9 `5 n* t$ t* D, a) P( u# B
    1. // JavaScript Document
      7 Q' \! O7 }3 q9 B) e. O- {
    2. function IMGS(id,w,h,da,c){
      ; e0 b6 F2 h! R/ M/ Q! `0 ~* g2 ^
    3.   this.w=w;
      ; F) n* g. ]# M  y% Q# {* x
    4.   this.h=h;: Q4 q  P' x5 b) `! X$ }& `
    5.   this.da=da;
      . x' i" T0 e. u
    6.   this.l=da.length;+ H: {8 o3 p2 [# w
    7.   this.html="";
      2 x8 L2 s! @. y( a$ Q# m- {) U" _
    8.   this.id=id;
      * N1 m7 C0 j; W% H$ G/ k1 o5 c# J
    9.   this.child={img:[],div:[]};: ~( _) ~2 Q/ `5 M
    10.   this.cr=0;
      : X- {: y/ s, J4 [4 u! o; F$ p
    11.   this.xx=0;
      % O5 w" Q4 ^8 R/ T' M- F  c3 T
    12.   this.m=10;5 P! W! M  s) @
    13.   this.pr=null;
      ( d$ `# o9 j* Z! u/ C4 q8 K- k
    14.   this.time=false;: u) n5 Y' K8 z7 [1 }: u6 T1 P
    15.   if(typeof c =="undefined"){
      8 a. p6 S5 ~& S. v, o  `
    16.     this.c={bg:"#600",color:"#fff",cbg:"#eee",ccolor:"#600",bc:"#ccc",step:6000}
      ! f% W! }( ]2 q9 V8 Y
    17.   }else{
      5 ]+ d% V7 q) v2 c
    18.     this.c=c;% E/ T0 g; `& m0 l, ]
    19.   }
      & H: J; Q2 {2 ?& ~, J
    20.   this.step=this.c.step;  k8 @0 @9 b/ ~; @! z
    21.   this.init();) A: r7 y3 ?. z7 a
    22. }
      8 W0 l* v8 }4 z4 z# [
    23. IMGS.prototype={# j5 T" u7 z' O  U' c
    24.   init:function(){
      " M" c3 s# Z/ [/ |! V* p+ ^8 T
    25.         document.writeln('<div id="'+this.id+'" style="position:relative;width:'+this.w+'px;height:'+this.h+'px;"></div>');
      . ^+ n% k/ q; z) G) i) S' \
    26.         var Bdiv=document.createElement("div");
      ) V& l' k4 U5 g( E' B6 y) z
    27.         Bdiv.style.cssText="position:absolute;right:10px;bottom:1px;height:25px;z-index:100;";
      1 D, [: F/ Q& }+ P
    28.         this.$(this.id).appendChild(Bdiv);. _$ B* j  f( t4 P  |8 G
    29.         var self=this;
      : x6 k4 \1 Q8 l% _. o
    30.     for(var i=this.l-1;i>=0;i--){
      7 c) ^2 T9 X# H- l
    31.           var img=document.createElement("img");
      % E2 F. n% ~0 {
    32.           var div=document.createElement("div");: X0 O8 t" |; I* U
    33.           img.width=this.w;
      $ b, n4 e; a) r! N0 \0 J0 p
    34.           img.height=this.h;
      : J' h3 `" C7 {; X/ @
    35.           img.border="0";  E* n& @4 e8 ^6 H' U! ^
    36.           img.src=this.da[i].src;
      % T1 K/ s' n% F5 W' B2 l
    37.           img.alt=this.da[i].name;
      - S: Y" d+ r' v6 e
    38.           div.innerHTML=(i+1);
      , u% K$ N9 H" ~- e
    39.           div.style.cssText="float:right;width:20px;height:18px;margin-right:5px;border:1px solid "+this.c.bc+";line-height:18px;text-align:center;cursor:default";# b2 ~" i) I3 I0 ^* v" [$ i. G# r, K5 ?
    40.           if(i>0){* U  s7 p7 E% s1 s4 b3 d6 }1 h8 q
    41.           div.style.cssText+="background:"+this.c.bg+";color:"+this.c.color+";";5 ^! X- M" v7 o  u1 \7 J1 D
    42.           }else{$ i# u0 c5 W( q7 `
    43.           div.style.cssText+="background:"+this.c.cbg+";color:"+this.c.ccolor+";";( @1 |% ?6 H3 G- B$ C
    44.           }5 u1 j! a7 A( d: M: J
    45.           if(typeof this.da[i].link !=""){
      : u. j! i9 }+ E: _( c- Q
    46.             var a=document.createElement("a");
      0 C3 z: Y) Y7 t& a# k- F
    47.                 a.href=this.da[i].link;
      3 P" v4 [8 M4 E- `6 r( f. F9 L
    48.                 a.appendChild(img);1 i! J/ X& f7 }) ]  n
    49.                 this.child.img[i]=a;
      9 P" v  \5 q8 t- B# w
    50.                 this.$(this.id).appendChild(a);
      9 z! G! X7 g% U: r7 A
    51.           }else{& P5 P7 \5 j! n" y# }$ d1 X
    52.            this.child.img[i]=img;
      , k, a, Y3 ]5 Q- A
    53.            this.$(this.id).appendChild(img);
      & r0 a" S$ L8 [) k! G
    54.           }) t  Z* \1 Q! T" Z8 e6 A' T0 C
    55.           this.child.img[i].style.cssText+=";position:absolute;left:0px;top:0px;z-index:1;display:none";
      6 P& |* _/ j  I" o5 L
    56.           this.child.div[i]=div;1 }* M  j. H% q9 n- J2 ~1 Q. P
    57.           div.onmouseover=function(){
      7 y% b3 w. ^# M0 U. x
    58.              self.Cl(parseInt(this.innerHTML)-1);
      # S3 J; h7 O( Y
    59.           }+ y' X0 Z( R9 N
    60.           if(this.l>0)this.pr=this.child.img[0];
      . X& }& \2 b& j% x, R% ]
    61.           if(this.l>1)Bdiv.appendChild(div);, p/ F  _) ]- m5 j' q+ \
    62.         }; w& [% g/ y0 v& n6 C
    63.         this.Go();
      ; F! V: w" z' O7 Q" }0 n  V' o7 N( S
    64.   },, L! e8 e! V7 x5 x7 z! ?1 F4 g7 `+ [  Z
    65.   Go:function(){4 H; M! }" o2 E" N
    66.         var self=this;
      " y/ y3 s# E( J
    67.         for(var i=0;i<this.l;i++){5 z5 E0 N0 e# K) n$ X
    68.      this.child.img[i].style.zIndex="1";) P* @  h9 N5 C
    69.          this.child.div[i].style.background=this.c.bg;
      7 |9 \/ S. U+ {! B2 R. g: t: v7 [
    70.          this.child.div[i].style.color=this.c.color;
      # Y9 A4 {' N6 f9 v7 l, f" H
    71.     }
      : {  j2 X: ^+ \9 `. e+ h
    72.         if(this.pr!=null)this.pr.style.zIndex="10";8 c' |3 N" v$ |+ q5 s2 n  R
    73.         this.pr=this.child.img[this.cr];6 `/ a+ X8 `& C, M( A2 P
    74.         this.m=10;
      : n8 P" k, P1 U
    75.         with(this.child.img[this.cr].style){filter='alpha(opacity=10)';opacity=0.1;display="";zIndex="20";}; g4 K: M: s) o- s" ]3 \$ ]* [
    76.         this.None(self,this.child.img[this.cr]);; K6 X0 y  n- Z- ~
    77.         with(this.child.div[this.cr].style){background=this.c.cbg;color=this.c.ccolor;}
      7 B% m( Q# u( D; I
    78.         this.cr++;
      ' o% ^* Q% s! S' `' [9 ]/ j# h4 e: z
    79.         if(this.cr==this.l)this.cr=0;7 j: H1 v: G; p5 b" c# a; u$ r/ X
    80.         if(this.l>1)this.time=setTimeout(function(){self.Go()},this.step);
        h; a; b$ I, e$ D2 w7 Q1 `
    81.   },
      & ~# S) _+ {( o- E4 H
    82.   None:function(self,tt){0 Y4 W! W, O* B* r. _* J2 c
    83.           with(tt.style){filter='alpha(opacity='+self.m+')';opacity=(self.m/100);}) q, ?0 T" r) ^* N0 C
    84.                 self.m+=5;
        e/ B' n( `/ {0 G$ y
    85.                 if(self.m<101)
      7 s* M6 J& n1 z7 G" \  u7 v
    86.                 self.xx=setTimeout(function(){self.None(self,tt)},10);" |! U& V/ G0 g
    87.                 else
      ; ?. b  ^8 Z# j7 U9 p! H. R
    88.                 clearInterval(self.xx);
      & K5 ^0 i0 u  G6 i3 s0 }' j  Y
    89.   },
      4 U" ~# F6 ~+ ~  l
    90.   Cl:function(cr){
      , c! E) m+ r3 U0 |( k
    91.          clearInterval(this.xx);! h6 g$ D: k& L1 L& h
    92.          clearTimeout(this.time);. ~* m5 Y' z" O: A8 ^- F: G
    93.          this.cr=cr;% T7 d$ W( o7 @0 j6 w% \( L
    94.          this.Go();
      - ^1 `: \4 W3 _2 i
    95.          5 f. ]& C! B$ ^# j( W
    96.   },
      ) B% ]' k0 B% L5 T, h
    97.   $:function(id){return document.getElementById(id);}# X5 \% o  R8 C+ {5 B' U, ^
    98. }
    复制代码
    & r/ i* o' W0 A. U& l. t# r6 _
    " z  U  R, ~# Y1 I, n0 g
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    客服电话

    1535-9999-891

    工作时间 周一至周六 8:00-17:30

    客服QQ点击咨询

    微信公众号

    APP客户端

    Copyright © 2008-2018 http://www.gaoshan.net All Rights Reserved. 福清高山网 闽ICP备16020270号-1

    快速回复 返回顶部 返回列表