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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

常用相册图片左右点击切换轮播js特效

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

DZ站长建站交流群:493651246

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* P% T3 G% k6 p: U<html xmlns="http://www.w3.org/1999/xhtml">
. q8 L! R, G0 k  h9 e$ ?3 z    <head>
( j3 Y# W; U4 k; T+ g, s        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5 c# ~2 u& E0 Q" G9 c! M6 A% o
        <title>常用相册图片左右点击切换轮播js特效</title>
9 i- z" x1 S# Y- `. N+ Z& Z        <meta name="keywords" content="相册,图片,左右,点击切换,轮播,js特效">
- d  r# d7 `) Y% c        <meta name="description" content="常用相册图片左右点击切换轮播,可应用在商品详情、汽车展示、相册展示等,jQuery左右按钮切换图片,点击小图缩略图可切换到对应的大图,当缩略图过多时可点击左右按钮控制底部缩略图片左右滚动,进行更多的图片切换。" />6 _0 N) D$ @  |3 s! @% |- k
    </head>
; b% e4 r6 V4 u( P4 f% n
  v. |6 u7 F3 R7 _    <body>! a6 ^! p3 f4 h$ W$ ~3 [

5 ~1 C3 P! Q. n( ]. H- j  s. `        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
) q. {1 J9 S6 Q$ J1 K        <script type="text/javascript">
( N3 E! q$ ]( ]2 w/ V4 p: N5 N            $(document).ready(function() {
. B* [* m. T6 n; x) L. } % V4 m9 A! n4 q% i
                //点击小图切换大图# t# k% I' ^2 `9 _, s; O6 V9 P" J! z: R
                $("#thumbnail li a").click(function() {) @& F+ H+ Z2 D6 d5 _+ N
                    $(".zoompic img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
: b+ p5 P- }- Y4 W9 P                    $("#thumbnail li.current").removeClass("current");
' B( X, w5 s* M- ]* s% T( v                    $(this).parents("li").addClass("current");
, H& J7 W# m7 s1 W3 w! n6 O8 w                    return false;4 ]& ~1 u+ D5 X8 U) t$ ^
                });
0 d+ z- O/ r7 s; S                $(".zoompic>img").load(function() {. U$ G! M- P4 }& ]% h3 p' n
                    $(".zoompic>img:hidden").show();
, m" B$ r3 r& ]* ]- e$ c                });, i3 R! z) z/ n8 {! V

) c- g% E& _! e. N9 l                //小图片左右滚动# p9 C6 j7 l6 p) Q; u2 Y4 J6 w
                var $slider = $('.slider ul');
* p* `4 p/ y' c0 S                var $slider_child_l = $('.slider ul li').length;7 B4 R0 G4 B) D
                var $slider_width = $('.slider ul li').width();
% b& y2 r$ ^% X1 S& o  m                $slider.width($slider_child_l * $slider_width);
' K: l7 O. s2 X; U9 h
3 Q1 X5 ^5 z% u- E  {4 J- k, o                var slider_count = 0;# m  j9 n2 A+ l. \# X
6 J- ~8 N) _* g' M+ v- D: @
                if ($slider_child_l < 5) {
" |/ q" D$ J, p' U                    $('#btn-right').css({cursor: 'auto'});% q7 \/ B# I( ]5 v; Q/ O: s
                    $('#btn-right').removeClass("dasabled");6 _0 u+ d3 P& w6 s9 [# K
                }
2 D2 i7 s$ X9 P * T/ d4 |8 g3 y0 ]
                $('#btn-right').click(function() {
& R+ O& h) O- C" ^" R  E                    if ($slider_child_l < 5 || slider_count >= $slider_child_l - 5) {
4 q7 ]( R' E: |; N                        return false;* P& i/ E" k7 u
                    }0 G- @. l: _( P8 ~

( Z6 s; C7 F! f1 I                    slider_count++;
; z3 o5 T" ~$ e8 O                    $slider.animate({left: '-=' + $slider_width + 'px'}, 'fast');
! K8 I2 j# p3 y2 o& ]                    slider_pic();7 S5 U; e, j$ L' {* _/ q9 l$ x5 W' a
                });
- `" ^6 @1 U. Z( q9 q' A0 i! D  _
* ?- ?! C1 f. G& y% `( @$ w                $('#btn-left').click(function() {2 e+ \) f- q1 F( d! B* o, D
                    if (slider_count <= 0) {, v3 N+ N6 d0 N; F& P0 {' D& R
                        return false;/ X1 j% ]/ I# y3 B" }
                    }) n. `8 X# W: p& `
                    slider_count--;% N, l' L: q0 x* ]8 J2 e5 k
                    $slider.animate({left: '+=' + $slider_width + 'px'}, 'fast');2 M9 P- S  W+ M) O; m3 H
                    slider_pic();8 h0 k+ S" \9 s7 s0 k" B9 N
                });
2 |) \$ J5 j- G' x, Z& m' q
+ C2 c8 X1 o8 g% R6 S8 Q$ I0 b                function slider_pic() {
' R) [3 j4 K# k# H. H8 O" R) B" ^                    if (slider_count >= $slider_child_l - 5) {
0 w- A  t7 \% V" y0 k                        $('#btn-right').css({cursor: 'auto'});
) T8 N2 j: R# L7 m                        $('#btn-right').addClass("dasabled");0 [4 g0 J1 S+ }% |4 c( R
                    }- ]# h+ q# P2 Y  y) R1 X
                    else if (slider_count > 0 && slider_count <= $slider_child_l - 5) {- O$ U; h+ o7 f$ y
                        $('#btn-left').css({cursor: 'pointer'});
8 H* A% Q& P* L7 Q                        $('#btn-left').removeClass("dasabled");
' W8 w  q3 K# {* i: {0 q2 {7 J' J                        $('#btn-right').css({cursor: 'pointer'});! D* [% W: y. x) K6 Y: H. P
                        $('#btn-right').removeClass("dasabled");
4 A7 K8 A8 S: G* H7 y! l6 N                    }
3 c1 [9 T5 |% `/ ~1 ^+ \, i                    else if (slider_count <= 0) {
8 l  z- p" }% N, M4 o3 M8 I                        $('#btn-left').css({cursor: 'auto'});
- r4 }9 K% g+ V& ?                        $('#btn-left').addClass("dasabled");
' J) T. S5 D* c! D0 z4 ?8 O, I                    }
& `% m( J3 f0 n8 p                }) g* i  z: G8 Y7 g; d. L* H: E

& m5 m" o" g. d" U; r            });
2 g1 ]4 E6 t& f        </script>
  y% b8 {/ S; ?5 }! Q' P 0 d2 y  Z9 f1 q& _. O# J9 Q/ A. B
        <style type="text/css">
6 @8 n/ P% a+ z% s4 l4 q; S            *{margin:0;padding:0;list-style-type:none;}0 [5 a9 p8 T+ J
            a,img{border:0;}
) |3 [% \! O8 l( Q/ g& r3 r            body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
) P' p4 ~$ I% p5 k6 a            /* zoombox */" |. V7 M$ `2 ]# f3 T
            .zoombox{width:686px;margin:20px auto 0 auto;}4 R0 s/ t+ {; A8 u$ L: h- q; n
            .zoompic{border:solid 1px #dfdfdf;width:684px;height:394px;background:url(images/loading.gif) no-repeat 50% 50%;}
, b  C. N/ s7 Q 0 d  y$ H" I2 {' Q1 s' X- j
            .sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}
3 B! t0 D# T( E% M7 Y( L+ z3 A            .sliderbox .arrow-btn{width:38px;height:76px;background:url(images/arrow-btn.png) no-repeat;cursor:pointer;}9 T% c; w5 n, K
            .sliderbox #btn-left{float:left;background-position:0 0;}
. e6 y6 M$ Y- p- B: R            .sliderbox #btn-left.dasabled{background-position:0 -76px;}8 M  ]/ ~) X' u0 S: Z, e
            .sliderbox #btn-right{float:right;background-position:-38px 0;}
1 }# T- }2 W! Y6 p! c7 O            .sliderbox #btn-right.dasabled{background-position:-38px -76px;}: O) a) y! W1 u( ^- w& }
            .sliderbox .slider{float:left;height:76px;width:605px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}" [6 w. w& I7 T7 q
            .sliderbox .slider ul{position:absolute;left:0;width:999em;}
$ f& ]' A. H* J9 u$ u8 ]3 ~% X$ n            .sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;}, m3 {7 o4 ~8 o
            .sliderbox .slider li img{border:solid 1px #dfdfdf;}
9 O- k' a, w5 h1 h8 D& e            .sliderbox .slider li.current img{border:solid 1px #3366cc;}
& l  M) J( n6 |4 h        </style>
; S8 X6 f$ k* q( k4 U
8 W' o/ w" [9 V9 }) d  y; K4 F9 H9 V        <div class="zoombox">
" y/ P# l+ ]) @9 @" j" A # m* B  k# w+ c; |# s# x, b
            <div class="zoompic"><img src="images/3427.jpg" width="684" height="394" alt="美女配奥迪A4L墙纸" /></div>
9 m1 W# @4 i! f- I& F! ? + O+ H, }: l4 r$ w4 @+ \2 y# w) o, \
            <div class="sliderbox">* G) k3 t" d' m
                <div id="btn-left" class="arrow-btn dasabled"></div>6 ^' D' E6 o/ N& T
                <div class="slider" id="thumbnail">
- C* _2 {2 C' p* K8 t                    <ul>7 E+ D$ g- ?. W0 u, k
                        <li class="current"><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>
( E# h" \' I7 Y) b) c                        <li><a href="images/52347.jpg" target="_blank"><img src="images/41a.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸02" /></a></li>
0 k) C9 Q+ @! f+ d/ }8 ~! m: V) z, n                        <li><a href="images/23463.jpg" target="_blank"><img src="images/234fa.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸03" /></a></li>3 Z4 g: `, \# n' I' I' @6 g) y
                        <li><a href="images/3247.jpg" target="_blank"><img src="images/412saf.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸04" /></a></li>
7 D9 [( U( t# q; B6 C- `                        <li><a href="images/26547.jpg" target="_blank"><img src="images/41356a.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸05" /></a></li>
- k3 ^9 y. w. v) T                        <li><a href="images/2153.jpg" target="_blank"><img src="images/432sadf.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸06" /></a></li>
! }. q* y4 a" E+ u. G5 S                        <li><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>
9 O3 a6 n* {( y3 i: K                    </ul>- w5 R9 h' W5 k. {2 Q/ S
                </div>) z8 ^9 [2 i, V7 k2 S. ~
                <div id="btn-right" class="arrow-btn"></div>; U& s. t' ]9 n( E9 L8 a
            </div>: u3 |. x% s: K0 E- T7 N

8 T' Y5 I3 r+ l7 G' X* a        </div><!--slider end-->: G0 R  W- \% ?/ |6 {% `
) u) P  z, A% P3 o( w# p0 w# A4 T
( s, o' a* l& `/ y; v
    </body>5 y# K- c& W* g8 a
</html>

6 L% S+ X9 b6 f9 z$ T% K1 Q  X& I3 v* c

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




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

本版积分规则

广告

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

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

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

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

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