兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册

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">% h& l/ e$ ^9 x) w% a* p
<html xmlns="http://www.w3.org/1999/xhtml">" V* Q. [/ r5 L2 N. T9 I% _# r
<head>
) `: W; u1 ]9 I9 s<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
' o  t$ K6 p3 u- Z. I<title>原生js自动轮播展示产品图片</title>* {' K. V$ Z9 x6 w- U9 D
<meta name="keywords" content="原生js,自动轮播,展示,产品图片" />
; |; J- t) c. b; }7 W, u<meta name="description" content="原生js自动轮播展示产品图片" />
2 V9 D, @: t: X' s+ i5 s! D7 w9 |<link rel="stylesheet" type="text/css" href="css/style.css">9 ]" X9 u; Z/ H& x1 T; c
</head>% x( ?. V$ `2 d" I* H
  Z0 m, V- {8 L) L
<body>$ d, g0 l9 T1 V" c) [: W
<div class="user_callback"> 3 n& M; e( p5 n0 Y1 @
         <div class="user_pic" id="user_pic">  % d, r" y# v. B" c0 V
                   <span class="prev"></span>   <span class="next"></span>  8 C: _' Q! B4 D" h8 J
                   <ul id="user_call">   % V1 }; I$ g! d
                            <li class="user_pic1">
. H! K& p, B( m9 l                                     <a href="#"> <img src="images/57f8c4ccN6a433b82.png" alt="1" width="248" height="285" /></a>" C# s+ s) Y' V8 L; h5 O/ |
                            </li>   
- G* V) l6 _2 r0 q                            <li class="user_pic2">) u9 i, f! N% B$ W* _
                                     <a href="#"> <img src="images/57f8c4d6Nd425f6a3.png" alt="2" width="247" height="285" /></a>: C$ {: O3 b+ _$ U) i# p; w
                            </li>   * h7 p0 ?+ f/ a* B3 ?
                            <li class="user_pic3">, L5 C9 }- R9 s
                                     <a href="#"> <img src="images/57f8c4e1Nbd6f109e.png" alt="3" width="248" height="285" /></a>
. e& o! K, p- q1 ]/ \' `4 U4 J                            </li>   / ^2 {3 u2 U: |/ J, @8 K
                            <li class="user_pic4">
% ]/ K' z8 c, w7 q! I$ S                                     <a href="#"> <img src="images/57f8c4ecN92c22efc.png" alt="4" width="247" height="285" /></a>
% \  b" {1 R8 ^% n                            </li>   # Z' ?! ]9 S8 u( w7 T' T
                            <li class="user_pic5">
$ ?; s- Q! B) H8 V/ H                                     <a href="#"> <img src="images/583691e7Na26009a0.png" alt="5" width="247" height="285" /></a>
- U2 s; j  k0 [( E& U                            </li>   
% `. M7 K1 H" S; L1 v5 x                            <li class="user_pic6">
7 |, F. u; l% }5 E) P/ G! c: F  w  B                                     <a href="#"> <img src="images/583691e7Ne2adc3c4.png" alt="6" width="247" height="285" /></a>" C2 ?4 ~% h2 M, H4 Z$ _
                            </li>     a8 H: j) h* F  g# `  r
                            <li class="user_pic7">0 R" L& R9 M6 {  e6 s
                                     <a href="#"> <img src="images/583691e7N058f6f5a.png" alt="7" width="247" height="285" /></a>
, u3 z5 {! V6 K6 M                            </li>   
9 \  p' ^6 O. @                            <li class="user_pic8">
+ Z0 E) r8 r0 I6 P/ V                                     <a href="#"> <img src="images/583691e7N36b67a44.png" alt="8" width="247" height="285" /></a>
- B5 J6 ?! Q2 h- s9 t+ K- s6 y' X- j                            </li>   2 Y/ x6 {- |9 i! M& |4 ?: E4 h* J
                   </ul>
" i: C0 d5 B7 r         </div>
8 {0 i: o$ a: a4 Z# b8 v: E. R. s9 H</div>. z. E4 u  I8 T0 q) P- v3 Q
<script type="text/javascript">function arcSlip()
" u' n, r6 F. D' V) f8 k  {; j9 [; n# H) E- q# ^/ A. K
          var oPic=document.getElementById('user_pic');7 J# T& _' y1 R; {. I
          var oPrev=getByClass(oPic,'prev')[0];' [6 f- k+ B9 ~# x# Z
          var oNext=getByClass(oPic,'next')[0];3 R/ ?- r  W9 e% C
          5 K: L& ^3 L7 U7 ]+ s; j8 @% @
          var aLi=oPic.getElementsByTagName('li');
7 ?6 E+ I/ a8 v1 @         
" L' |. R3 ^) p, z3 ^6 p& T, X+ s          var arr=[];
% ^0 b& w8 x" I; E1 n         
: j* Z6 I* L' ^7 Z$ ]5 n          for(var i=0;i<aLi.length;i++)7 l0 T: z4 U' P- y
          {' l" o- P2 Z+ n; i( _, ?" r
            var oImg=aLi.getElementsByTagName('img')[0];
. Y- G" t( i! l5 M: X0 t           
7 s5 v5 _+ \: \1 a3 h4 S% P8 Q- v! R                  arr.push([parseInt(getStyle(aLi,'left')),parseInt(getStyle(aLi,'top')),
% }8 z0 S9 @4 t                              getStyle(aLi,'zIndex'),oImg.width,parseFloat(getStyle(aLi,'opacity')*100)]);+ K: e4 M- H7 l
          }# q- B# b  q1 C& @
          ) h/ C- G8 O9 f" {, z) b! L
         
) G9 L6 P. b9 N8 T4 e- W" P8 Q          oPrev.onclick=function moveTP()
! ]3 q, |6 |/ o: n: q          {5 }& J9 I" c& |# Z8 O
              arr.push(arr[0]);
" y: V% J! m- q2 h                    arr.shift();
- c& p" ?0 l8 G: Q: h. h1 ?                        for(var i=0;i<aLi.length;i++)
" a3 Y; y2 `% L& A9 W( n                  {
7 J# Y" I( _3 |! _5 h! Z, V                                 var oImg=aLi.getElementsByTagName('img')[0];
/ J4 w7 ^+ a! {( o6 p                                              + l' N1 X* c) G' C9 F/ a0 X; K
                                               aLi.style.zIndex=arr[2];" v4 r: ]5 C* W: d" R
                                               startMove(aLi,{left:arr[0],top:arr[1],opacity:arr[4]});
$ r) g) z! q, d- v4 `4 v                                               startMove(oImg,{width:arr[3]});
/ m$ C; [- ~) P                             }
9 H+ n$ a* Z) `) A* b: V9 w* r                           
7 D9 W! P  y* A% x( ]6 |+ Q          }& U' n9 b* ]$ k' S& e  r, ]
          & H1 X: I9 ?- C  F& R6 a
         oNext.onclick=function moveTN(): f) E* S, V6 E' i/ ]
          {2 z4 W. D& J) y3 n2 ~2 z
               arr.unshift(arr[arr.length-1]);5 D7 E$ x. p$ x  i8 s* r' T
                     arr.pop();
# U: u0 l/ ]' n* A, y7 z                        for(var i=0;i<aLi.length;i++)9 A) w3 c9 d3 l0 n( j
                  {
8 {" P2 m5 L. g! T8 z! g                                 var oImg=aLi.getElementsByTagName('img')[0];
8 E/ O8 {9 f. Z0 c, ]2 y                                              + d# o- Z" K8 e! f6 }, k
                                               aLi.style.zIndex=arr[2];
" ~+ W; W1 ~7 a  E; x                                               startMove(aLi,{left:arr[0],top:arr[1],opacity:arr[4]});" @9 C7 {% S7 j0 m3 z7 z
                                               startMove(oImg,{width:arr[3]});+ v  \: q: _( T. U; r! z
                             }! q1 O& z: J3 B4 _# A$ A
          }2 x- F0 a% {- t- j2 a* D
    var moveTime = setInterval (function(){
( W3 x/ B! _! B& K* T/ K: K; \        
/ X2 Z, o& k+ H                   oNext.click();
# h9 O8 A: _; Z: P                    k. B; `5 M" j3 ^* U) A) }- Q! ?3 t8 ]
                   },1000);
3 x1 c5 }. A4 l         $('#user_pic').hover(function(){
$ }1 w- p% t9 ]# p! S0 t/ S$ b9 ?                   ;;
& E5 u- I) s' S' @         clearInterval(moveTime);7 I  ^) Z' |% V% K2 y+ V
            },function(){
& }9 f: M3 }$ K        moveTime=setInterval(function(){
2 ~1 Z" A4 M% v5 q0 T8 B                   oNext.click();              y7 u! q: k7 b7 J. J" j
                   },1000);
- S. v% A# H5 B- X8 z8 o            });
3 k3 \1 K1 r  A: N; ?* i/ }6 G                                    
* B0 \4 t6 i) P, I function getStyle(obj,name)
/ D2 P* m  i/ L9 Z# _7 e8 s          {
  i* l( l+ [4 a3 e: T2 W0 N; \+ l                if(obj.currentStyle){ return obj.currentStyle[name]; }
" I9 G7 o8 i" N3 U" p( `                      else{ return getComputedStyle(obj,false)[name]; }
0 J4 [$ A; A2 n' b. ^          }
8 T8 }  b/ b: C. t7 e7 Q$ T* [  }
' j8 |, n* w" F0 hfunction getByClass(oParent,sClass)
$ R5 y1 }- R7 C3 y& d% E' F3 S' f  {
2 N0 j# u8 N' m9 O      var aResult=[];8 l+ A. X: D+ f5 ]1 i" o( J
           var aEle=oParent.getElementsByTagName('*');3 |4 f1 u$ R8 i3 H7 T
          ' ~7 D& {) m6 u, h
                     for(var i=0;i<aEle.length;i++)
% w4 T0 W0 X8 U- b6 U                     {
7 t& N$ M9 L" E8 W* I' D. g                             if(aEle.className==sClass)
) I3 e. s. n4 {, A$ R                             {
" {1 g, Z* x# L4 y; d0 n0 I                                     aResult.push(aEle);4 X' W4 R7 r+ h7 ]4 [4 H
                             }
5 }0 j' f; E6 n9 T6 Z                     }. ^& N7 _8 M/ ]1 n$ h
           return aResult;9 A0 o6 H: H9 U& D8 y
  }& u+ T! a4 T* R' g& L; |) N
function getStyle(obj,name)
- C" G# y8 f8 A4 R# S  {- w) H- h) a- E0 n3 `
       if(obj.currentStyle): F* l0 P, \0 x: P& x/ k! Y
            {. t( h$ z9 s3 G8 d) T
                return obj.currentStyle[name];
. W! p8 u3 B4 L% m( N            }" o5 n9 Y1 w( p3 H
      ! F' j1 D- ~- K1 l
            else
! @. w- G- E' h, N* p" p) d1 }' i            {
: Q3 |8 n+ F1 W: `                return getComputedStyle(obj,false)[name];- k4 `$ X) X" l% u
            }: n6 O8 \3 n2 E- O
  }
1 Q  Y+ z2 _9 a# n/ s6 q function startMove(obj,json,fnEnd)
# M$ u8 }. }. k/ }) g. O  {
$ x  {( n0 e% I1 [* R. k+ ~       clearInterval(obj.timer);
( D* \+ S, ~- t! N       obj.timer=setInterval(function()
4 H) g  _% c( Q            {, s5 x) d! }7 e; ?1 ]3 b
                    var bStop=true;: P9 y" }% O0 I  J, t+ ^
                    for(var attr in json)  F* h& D- N7 @, T
              {     
: u1 u9 S6 c* d4 @. n                               var cur=0;. C# Q& e1 B# W+ x* }* m* R
        / U9 Q4 P* n) J1 O) t0 c
                               if(attr=='opacity')( C; S. ?+ g# ~' ]( X7 R' x3 S- x
                               {
/ @6 K- l2 P/ j9 A0 W* D7 g$ ?3 O, o                                               cur=Math.round(parseFloat(getStyle(obj,attr))*100);* {& @# E! O2 \9 A# q
                               }2 i; _: {( `& F2 Z) c
                               else7 [4 B3 @8 k9 l( R$ w% M5 Y3 I
                               {* A$ l! @* T0 g1 ~
                                               cur=parseInt(getStyle(obj,attr));6 h" Z5 T% P- X' x: J' r
                               }
" h7 R$ @( a' X$ \  N' Q; z+ U                    
. D- r( C+ y2 c1 Z: v                               var  speed=(json[attr]-cur)/6;! \' Q. k: s. W$ I) \' f! m
                               speed=speed>0?Math.ceil(speed):Math.floor(speed);( z$ W, C5 t! V. J' o
                     
! q) V+ u7 T' D2 n. z                               if(cur!=json[attr]) bStop=false;2 q5 Z0 h; h% ^2 A; W- G& J
                             . x) f, {2 I, b, K
                               if(attr=='opacity')+ w/ f% Z* h, u8 d9 e6 ]3 W( k) F
                               {
* S5 ^$ J7 P) A                                        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
; d) O, `% L' `/ \: F+ I- h5 \" }                                        obj.style.opacity=(cur+speed)/100;# m2 }. \$ r; n6 W, s  C/ B; U; Y- D
                               }. q* L& |5 V1 E& A, F
                               else& W1 T; H* J% I6 |9 j
                               {5 k* x# O+ Q% [2 o5 Q3 S: L
                                        obj.style[attr]=cur+speed+'px';: [. F! N% n8 b
                               }
$ z8 [- i: w) F6 U                    }, K5 b; M0 I2 u! ~% u
                    2 E. E; d9 w/ J4 ~  A
                    if(bStop)
5 P0 J3 x+ k' j" b                    {. s2 w7 N) e+ a! u; ]
                        clearInterval(obj.timer);
" d- l+ F1 f& B8 t' R0 W                             if(fnEnd) fnEnd();
0 z& v6 D3 _( r& J2 Q: S                    }' P1 ?3 l: Z0 X3 E- s1 L$ f
                    
% i; D4 y$ \# _' m: U/ t% p1 o            },30)
5 Q1 s2 ?# s: m           . @5 q1 N$ L6 X' b: V! H
          ! O5 ^/ c# k! g  q
  }; p& S  F8 T! k# L( a
  arcSlip();
* B6 Q& r1 w8 F</script>( P1 q1 r  X1 O0 M
</body>, _6 _/ T3 J) f. f2 h% R( v$ m9 q
</html>
% u6 @8 b. r' V4 [2 y

) h1 j5 |! R+ e" ]

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




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

本版积分规则

广告

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

兔源码 QQ交流群:493651246  GMT+8, 2019-9-22 10:09
←站长统计工具 查看密码:tuyuanma

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

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

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