Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

原生js自动轮播展示产品图片

[复制链接]
tuyuanma 发表于 2017-1-20 18:40:39 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">% H0 t1 G0 n4 U
<html xmlns="http://www.w3.org/1999/xhtml">
  S- A) X6 q. f& O4 {+ V<head>/ z' Q, x9 {, e# |. P- c) |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, d- A# d" Z$ G: h
<title>原生js自动轮播展示产品图片</title>
! y1 }* r" b6 X& u; [2 r! a; B<meta name="keywords" content="原生js,自动轮播,展示,产品图片" />4 C9 M1 C% F% M' ?% W4 A9 g
<meta name="description" content="原生js自动轮播展示产品图片" />
' c" ?$ u" Y* D" S/ |5 \<link rel="stylesheet" type="text/css" href="css/style.css">% a, S9 O& u$ _" P0 X8 `4 ?: ~
</head>; I- S1 ]$ L( t7 u7 \% p/ g
4 v% q* Z; _, Z4 R/ y
<body>4 L. {1 S1 h  W6 q4 L: w
<div class="user_callback">
2 f- g- g. V! U8 S* j         <div class="user_pic" id="user_pic">  + e0 V) l3 _: c; Z5 G9 M
                   <span class="prev"></span>   <span class="next"></span>  
$ ]& }  J- N( k5 O6 m# a6 w                   <ul id="user_call">   * }+ ?7 O: {1 @( i3 k( r: N; B
                            <li class="user_pic1">
3 P0 H- i4 K' a5 L                                     <a href="#"> <img src="images/57f8c4ccN6a433b82.png" alt="1" width="248" height="285" /></a>
0 e" q, b8 ?' P7 V+ G                            </li>   * [6 [4 C6 N# A; ]2 E4 K( E" f4 y8 [
                            <li class="user_pic2">; h, j5 u8 _! \
                                     <a href="#"> <img src="images/57f8c4d6Nd425f6a3.png" alt="2" width="247" height="285" /></a>( w, c/ K  ~# _! Z% [+ R
                            </li>   , B3 U5 ~8 _8 M; u3 d% H7 x
                            <li class="user_pic3">
% W8 r8 O3 P' |& h4 m7 D; R                                     <a href="#"> <img src="images/57f8c4e1Nbd6f109e.png" alt="3" width="248" height="285" /></a>
9 I% \4 O/ t3 b                            </li>   0 r5 [' y$ y6 L& ]
                            <li class="user_pic4">
3 w, u1 ~1 d( i4 g                                     <a href="#"> <img src="images/57f8c4ecN92c22efc.png" alt="4" width="247" height="285" /></a>9 b$ n( z5 D; m1 y
                            </li>   
# D- z! q; m4 K4 E* W, y$ z                            <li class="user_pic5">
) q( q5 Y1 @7 L                                     <a href="#"> <img src="images/583691e7Na26009a0.png" alt="5" width="247" height="285" /></a>
, ], s0 [) a% L                            </li>   
% J! @2 F6 ]$ k0 M8 {3 @                            <li class="user_pic6">
& Z7 U/ o) c5 m: P" m                                     <a href="#"> <img src="images/583691e7Ne2adc3c4.png" alt="6" width="247" height="285" /></a>
4 }- m; C3 J; O0 p9 I                            </li>   . C7 ~! @/ ^" n+ q6 n
                            <li class="user_pic7">8 Z- t' G4 c& j
                                     <a href="#"> <img src="images/583691e7N058f6f5a.png" alt="7" width="247" height="285" /></a>8 N9 p0 T5 a& e) U! [1 Q: Q2 e
                            </li>   0 \  O6 Y2 n$ a# Y: s7 O+ X! `
                            <li class="user_pic8">
; F! j4 v. d- ]5 o3 I7 t                                     <a href="#"> <img src="images/583691e7N36b67a44.png" alt="8" width="247" height="285" /></a>: U, H6 G2 W- u4 ^$ F
                            </li>   
' W# |7 H$ K9 v9 u                   </ul> 3 S8 L7 S: T& E6 j4 P
         </div>
# o# S9 L4 T& y/ g4 b</div>5 v, e" p# h; m1 y) V3 b
<script type="text/javascript">function arcSlip()  |5 n  ~! b" V+ o' k: L" E( R
  {& G0 B+ A9 G. [/ `- h, M
          var oPic=document.getElementById('user_pic');0 ?" X# m( P+ Z0 o
          var oPrev=getByClass(oPic,'prev')[0];& u; L) s3 h- y  U2 _9 r
          var oNext=getByClass(oPic,'next')[0];6 r" R) ?! v$ s
         
+ z7 S: ^( U0 U! w# m4 R          var aLi=oPic.getElementsByTagName('li');
4 k) T3 o. Q) S6 H# v, j0 I$ h) C1 ^         
. d2 E4 C, C& t+ {2 v          var arr=[];
  G8 t% P, i: B         
4 a) D5 c+ C2 I; z5 B          for(var i=0;i<aLi.length;i++)6 K8 d2 {, u" r
          {
9 l2 `% p! {. p) \( p' h0 C8 K& n: I            var oImg=aLi.getElementsByTagName('img')[0];& \7 S; F1 j: q9 G
           ; d$ k* m8 _, i
                  arr.push([parseInt(getStyle(aLi,'left')),parseInt(getStyle(aLi,'top')),+ s  u  g& W1 M( U& m; r
                              getStyle(aLi,'zIndex'),oImg.width,parseFloat(getStyle(aLi,'opacity')*100)]);
: {' M  v' F$ |. z/ A1 M" y4 l' U1 i          }
# f4 J7 @1 N! k( Z- c          & y/ p3 F; D" W! [, x$ E  y% N
         
' U; f- ^$ s: I+ ?+ H* b1 c          oPrev.onclick=function moveTP()
( {3 W. }; R; S7 Z6 Q9 L8 S          {
) K5 e, b0 |3 i% Y- V2 ?) ~2 R8 J              arr.push(arr[0]);" Q6 s7 ^8 E: |( {' g/ |  Y
                    arr.shift();
4 y. u9 w/ X1 a% |% F. \                        for(var i=0;i<aLi.length;i++)
/ k- b6 t9 `& Q3 j6 r' Z  |                  {! E$ D( w4 U* K. O9 l
                                 var oImg=aLi.getElementsByTagName('img')[0];
& l/ |1 f. o3 A# M2 |0 E                                             
) X0 x! z( c8 ~% ]* P2 R                                               aLi.style.zIndex=arr[2];# _1 S! w5 h- n; b4 y& L
                                               startMove(aLi,{left:arr[0],top:arr[1],opacity:arr[4]});
: [; x0 ^- h+ T: N5 k5 ~                                               startMove(oImg,{width:arr[3]});+ S# N& q! j( |( k- q* J! a
                             }
/ |1 d- k$ P, G  Y7 `9 K2 _. d                           
3 i  w: d1 S' G1 [' G          }! s" N5 D) B. y& s6 c- s- q
          ) l+ a9 q. C. _5 v
         oNext.onclick=function moveTN()
0 R. ^: N/ h5 M          {
; }% H# I$ o6 i: j               arr.unshift(arr[arr.length-1]);
4 ~5 d, [" [: ?! k                     arr.pop();- M, D! u5 I0 {
                        for(var i=0;i<aLi.length;i++)
! L: ^( @  ^- Z, b# w" }5 }2 |                  {  `2 X. l# b: \, |! t* G: q
                                 var oImg=aLi.getElementsByTagName('img')[0];
# D& V9 D& F$ w5 s7 y. s: {8 T                                             
1 Q8 w7 C/ _- c7 G% [; w                                               aLi.style.zIndex=arr[2];
5 s0 A5 R; ]* Q: F$ E& A                                               startMove(aLi,{left:arr[0],top:arr[1],opacity:arr[4]});
) h7 Y# H: m) K, q# a- s  N; Q4 L                                               startMove(oImg,{width:arr[3]});
8 L* J+ [9 V/ T7 R- P6 U; ^                             }
3 H* X/ L" e/ ?; D; k! y          }
! i. ?! _1 S4 A% l- Z7 q9 L* s    var moveTime = setInterval (function(){7 R, _8 D0 R2 c2 s6 O5 e
        " h9 ]# V. c. a9 D+ S' a* y
                   oNext.click();
' p( t: @. s/ V+ j3 l2 f                  0 y1 R2 I# }; q6 P# A3 ^
                   },1000);
8 m1 _) Z/ d: f3 H0 d. W8 L3 ?0 A) r         $('#user_pic').hover(function(){- @% C) ?9 q0 h4 g4 t
                   ;;
% o, H1 ?' I4 B+ w. y         clearInterval(moveTime);4 x" i$ G# y& P- a. r. g# G2 N
            },function(){
. U2 l7 ?7 j/ n. d        moveTime=setInterval(function(){ : V0 M7 z; P9 ^0 \, D
                   oNext.click();            - T3 H! B6 L& a+ _
                   },1000);
5 _! F3 \. A6 M            });7 |  ^' R$ d. k' y% Z
                                    6 ]/ c3 N% K, o. i. b: s
function getStyle(obj,name)$ O9 _8 q* O  ^* P6 Z. f
          {4 m9 U; V5 J6 @( ]9 X, {) B3 ^
                if(obj.currentStyle){ return obj.currentStyle[name]; }1 h2 P5 m( @; V- u7 |
                      else{ return getComputedStyle(obj,false)[name]; }
5 p1 |# y' J; D9 U( t' V3 n          }
$ |- R: w  T" m6 n' X$ z2 F  }
1 O/ _  D' p( I3 X" e. F# S1 J: kfunction getByClass(oParent,sClass)
8 v# i2 |( N7 u0 g0 d' b) C  {! [& I$ q* i7 t4 v9 W3 a
      var aResult=[];
& Q2 m2 U+ g( }4 |/ W, E           var aEle=oParent.getElementsByTagName('*');
) J: M2 Y  V, f+ A2 Y+ F% f$ o         
5 n: q  {- v5 Q8 h& @/ r  M' G; U                     for(var i=0;i<aEle.length;i++)2 K3 g1 j3 \! Y
                     {/ N! U, W" h# J) n- @; h0 \( s/ s
                             if(aEle.className==sClass), f' q/ |' E9 I# h) a7 ~
                             {
9 @3 k" S- V; @, {% M( K                                     aResult.push(aEle);
0 B$ H( g7 y  c2 l                             }
) P, u- s& P) c1 H                     }
! i4 _& \7 \1 u$ t           return aResult;
2 d2 [, P9 U3 ?- X1 U; ~2 N  }6 q/ A! ^' ?0 v: S) ?" J; L
function getStyle(obj,name)
: w$ ]1 f8 o8 K" e3 k  {
) V- G/ `+ n- u: p0 j3 K( G% [       if(obj.currentStyle)1 q2 ?0 k  C0 Z" \. S& A+ b1 N
            {! t8 n% s( ?$ e0 D* y7 h1 P
                return obj.currentStyle[name];9 v7 H9 i* H# s: @7 ?
            }$ d3 E$ t; R! d+ {
      
1 _4 H0 @0 U3 ~" N: y9 f1 v4 S            else
" G4 Q6 g8 |: |9 \            {. c. K2 o& v  j, v
                return getComputedStyle(obj,false)[name];
; b, l1 E5 k  ~- f6 ]            }
) k9 s/ H7 _$ }9 u7 B( P( D  }2 V( H8 f6 L% x' B) O9 O; L
function startMove(obj,json,fnEnd)4 r" E( q8 h5 Y  t
  {7 k9 p1 y4 M% r6 z  b7 t5 r
       clearInterval(obj.timer);/ ^: B- N9 F' g- z6 i% Z7 B1 D+ b
       obj.timer=setInterval(function()/ @0 W& ]. G2 Q4 k0 k& ]
            {
3 z) ?1 l; c% z                    var bStop=true;3 N' L9 ^* ~7 U" b
                    for(var attr in json)
' |3 \  _, E4 A+ {1 r/ U- a1 _2 w3 l              {     
. u" L# ~8 q% c8 H# a6 r7 l                               var cur=0;- d5 f2 l/ T- T$ q
        6 c- {% P) e/ t' }& f
                               if(attr=='opacity')9 \3 z' X* f0 i. [. q- F/ y
                               {# b' |; f& v) Q; j3 h8 M( ?$ ]' c
                                               cur=Math.round(parseFloat(getStyle(obj,attr))*100);
3 G+ t7 ]" X6 K5 @0 F                               }
* b1 P3 z2 V) m: B- s/ M9 q. z                               else
1 ^$ F3 }3 q" p- G1 o" v6 K, @: F0 \                               {9 i8 i+ U' N) p* ^  y$ f4 v
                                               cur=parseInt(getStyle(obj,attr));
  _! q; R2 J7 R1 M                               }
! A; v, [1 S2 l- s, o1 I                    5 E, N: G, b- j  v: g" e* b7 z
                               var  speed=(json[attr]-cur)/6;
& N; p8 W4 M! G' t& G6 S                               speed=speed>0?Math.ceil(speed):Math.floor(speed);! b( x- T9 ~4 o1 ]6 J3 M. J: w
                     9 p* m  A0 Z1 `+ n. T% G
                               if(cur!=json[attr]) bStop=false;
, L) c( V* x/ O% s! n* H                             & }$ a2 r% e* p* X$ X! _
                               if(attr=='opacity')6 \# |$ `* f* ?. d& C$ b0 D
                               {
8 o' R0 w. \- I! p' c& O( L                                        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
$ F' W- w* S0 G3 @' C$ y. x                                        obj.style.opacity=(cur+speed)/100;( S3 C; I% c0 A) A
                               }, [  W* `: }$ b2 X& w
                               else* b( ^3 e8 e2 Q
                               {4 n6 W/ ^8 `2 V3 @, I- m5 t- u: v
                                        obj.style[attr]=cur+speed+'px';$ a: Q* F# s6 u( }9 p1 i
                               }" r3 e, K$ X- F' r4 ~. }% d
                    }
6 J. f; A2 j" u# j, e) I% d7 }0 J; _                    ' N9 a0 c0 R5 c" `1 o( G
                    if(bStop)$ ?5 _+ I' @- W- P' G
                    {
( l/ Z4 ?9 Z) |# ^                        clearInterval(obj.timer);
- o. V5 b& f$ r; V9 y                             if(fnEnd) fnEnd();0 G# _. ~; I9 h8 Y5 q3 T
                    }' o7 ~1 G- {0 \! v" ~) Y
                    
8 L' A3 l$ F. D. x6 S5 I# B4 [3 ]            },30)
5 Z( f) l& F( v7 K# w8 J           
9 n. W7 P# ^9 u) D         
6 A' W- L, M. `4 P4 h- e  }. a$ O3 ]& f. a% A
  arcSlip();
/ x/ g# ~& z$ v' v+ q2 d/ ?. S$ v</script>
. o0 [% J# n9 p</body>( R; ]$ q6 |9 t: `; ]
</html>

* V# K- T0 Y' L8 b% N
. g5 ~, I& b: z; M! L% `- |" j1 T

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 (公网安备36112102000036号 赣ICP备17001544号)

兔源码 QQ交流群:493651246  GMT+8, 2020-1-18 17:36
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

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