jquery 相册

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head><title>
  4 
  5 </title>
  6     
  7 <style type="text/css">
  8 .sliderbox{height:150px;overflow:hidden;margin:6px 0 0 0; border:#e9e9ea solid 1px; padding-top:14px;float:left;}
  9 .sliderbox a{text-align:center;text-decoration:none;} 
 10 .sliderbox .arrow{width:38px;height:104px;background:url(../images/arrow-btn.jpg) no-repeat;cursor:pointer;float:left;}
 11 .sliderbox .left{float:left;background-position:0 0;}
 12 .sliderbox .left.dasabled{background-position:0 -127px;}
 13 .sliderbox .right{float:right;background-position:-44px 0;}
 14 .sliderbox .right.dasabled{background-position:-44px -127px;}
 15 
 16 .sliderbox .slider{float:left;height:504px;width:620px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}
 17 .sliderbox .slider ul{position:absolute;left:0;width:auto;height: 160px; overflow:hidden; list-style:none;float:left;padding:0;}
 18 .sliderbox .slider li{float:left;width:158px;height:134px;text-align:center; margin:0 0 0 0; padding:0;list-style:none;}
 19 .zoombox p{ font-size:14px; color:#666; line-height:25px; height:auto}
 20 </style>
 21 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 22 <script type="text/javascript">
 23 
 24     function SetSlider(thumbnail, btn_right, btn_left) {
 25 
 26         var $slider = $('#' + thumbnail + ' ul');
 27         var $slider_child_l = $('#' + thumbnail + ' ul li').length;
 28         var $slider_width = $('#' + thumbnail + ' ul li').width();
 29         $slider.width($slider_child_l * $slider_width);
 30 
 31         var slider_count = 0;
 32         var show_Item_count = 4;
 33         if ($slider_child_l <= show_Item_count) {
 34             return;
 35         }
 36         $("#" + thumbnail + " li a").click(function() {
 37             $("#" + thumbnail + " li.current").removeClass("current");
 38             $(this).parents("li").addClass("current");
 39             return true;
 40         });
 41 
 42         if ($slider_child_l < show_Item_count) {
 43             $('#' + btn_right).css({ cursor: 'auto' });
 44             $('#' + btn_right).removeClass("dasabled");
 45         }
 46 
 47         $('#' + btn_right).click(function() {
 48             if ($slider_child_l < show_Item_count || slider_count >= $slider_child_l - show_Item_count) {
 49                 return false;
 50             }
 51 
 52             slider_count++;
 53             $slider.animate({ left: '-=' + $slider_width + 'px' }, 'fast');
 54             slider_pic();
 55         });
 56 
 57         $('#' + btn_left).click(function() {
 58             if (slider_count <= 0) {
 59                 return false;
 60             }
 61             slider_count--;
 62             $slider.animate({ left: '+=' + $slider_width + 'px' }, 'fast');
 63             slider_pic();
 64         });
 65 
 66         function slider_pic() {
 67             if (slider_count >= $slider_child_l - show_Item_count) {
 68                 $('#' + btn_right).css({ cursor: 'auto' });
 69                 $('#' + btn_right).addClass("dasabled");
 70             }
 71             else if (slider_count > 0 && slider_count <= $slider_child_l - show_Item_count) {
 72                 $('#' + btn_left).css({ cursor: 'pointer' });
 73                 $('#' + btn_left).removeClass("dasabled");
 74                 $('#' + btn_right).css({ cursor: 'pointer' });
 75                 $('#' + btn_right).removeClass("dasabled");
 76             }
 77             else if (slider_count <= 0) {
 78                 $('#' + btn_left).css({ cursor: 'auto' });
 79                 $('#' + btn_left).addClass("dasabled");
 80             }
 81         }
 82     }
 83 </script>
 84 
 85     <script type="text/javascript">
 86         $(document).ready(function() {
 87         SetSlider('HJContainer', 'hj_right', 'hj_left');
 88         });
 89 
 90     </script>
 91 
 92 </head>
 93 
 94 <body>
 95     
 96         <div class="sliderbox">
 97             <div id="hj_left" class="arrow left dasabled">
 98             </div>
 99             <div class="slider" id="HJContainer">
100                 <ul id="hjFile">
101                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
102                         target="_blank" title="一等奖">
103                         <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
104                             height="104" alt="一等奖" />
105                         <br />
106                         一等奖</a></li>
107                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
108                         target="_blank" title="一等奖">
109                         <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
110                             height="104" alt="一等奖" />
111                         <br />
112                         一等奖</a></li>
113                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
114                         target="_blank" title="二等奖">
115                         <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
116                             height="104" alt="二等奖" />
117                         <br />
118                         二等奖</a></li>
119                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
120                         target="_blank" title="三等奖">
121                         <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
122                             height="104" alt="三等奖" />
123                         <br />
124                         三等奖</a></li>
125                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
126                         target="_blank" title="市一等奖">
127                         <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
128                             height="104" alt="市一等奖" />
129                         <br />
130                         市一等奖</a></li>
131                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
132                         target="_blank" title="三档">
133                         <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
134                             height="104" alt="三档" />
135                         <br />
136                         三档</a></li>
137                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
138                         target="_blank" title="你是何人">
139                         <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
140                             height="104" alt="你是何人" />
141                         <br />
142                         你是何人</a></li>
143                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
144                         target="_blank" title="你是何人">
145                         <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
146                             height="104" alt="你是何人" />
147                         <br />
148                         你是何人</a></li>
149                     <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
150                         target="_blank" title="天天">
151                         <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
152                             height="104" alt="天天" />
153                         <br />
154                         天天</a></li>
155                 </ul>
156             </div>
157             <div id="hj_right" class="arrow right">
158             </div>
159         </div>
160     
161 </body>
162 </html>

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    
<style type="text/css">
.sliderbox{height:150px;overflow:hidden;margin:6px 0 0 0; border:#e9e9ea solid 1px; padding-top:14px;float:left;}
.sliderbox a{text-align:center;text-decoration:none;} 
.sliderbox .arrow{38px;height:104px;background:url(../images/arrow-btn.jpg) no-repeat;cursor:pointer;float:left;}
.sliderbox .left{float:left;background-position:0 0;}
.sliderbox .left.dasabled{background-position:0 -127px;}
.sliderbox .right{float:right;background-position:-44px 0;}
.sliderbox .right.dasabled{background-position:-44px -127px;}

.sliderbox .slider{float:left;height:504px;620px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}
.sliderbox .slider ul{position:absolute;left:0;auto;height: 160px; overflow:hidden; list-style:none;float:left;padding:0;}
.sliderbox .slider li{float:left;158px;height:134px;text-align:center; margin:0 0 0 0; padding:0;list-style:none;}
.zoombox p{ font-size:14px; color:#666; line-height:25px; height:auto}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

    function SetSlider(thumbnail, btn_right, btn_left) {

        var $slider = $('#' + thumbnail + ' ul');
        var $slider_child_l = $('#' + thumbnail + ' ul li').length;
        var $slider_width = $('#' + thumbnail + ' ul li').width();
        $slider.width($slider_child_l * $slider_width);

        var slider_count = 0;
        var show_Item_count = 4;
        if ($slider_child_l <= show_Item_count) {
            return;
        }
        $("#" + thumbnail + " li a").click(function() {
            $("#" + thumbnail + " li.current").removeClass("current");
            $(this).parents("li").addClass("current");
            return true;
        });

        if ($slider_child_l < show_Item_count) {
            $('#' + btn_right).css({ cursor: 'auto' });
            $('#' + btn_right).removeClass("dasabled");
        }

        $('#' + btn_right).click(function() {
            if ($slider_child_l < show_Item_count || slider_count >= $slider_child_l - show_Item_count) {
                return false;
            }

            slider_count++;
            $slider.animate({ left: '-=' + $slider_width + 'px' }, 'fast');
            slider_pic();
        });

        $('#' + btn_left).click(function() {
            if (slider_count <= 0) {
                return false;
            }
            slider_count--;
            $slider.animate({ left: '+=' + $slider_width + 'px' }, 'fast');
            slider_pic();
        });

        function slider_pic() {
            if (slider_count >= $slider_child_l - show_Item_count) {
                $('#' + btn_right).css({ cursor: 'auto' });
                $('#' + btn_right).addClass("dasabled");
            }
            else if (slider_count > 0 && slider_count <= $slider_child_l - show_Item_count) {
                $('#' + btn_left).css({ cursor: 'pointer' });
                $('#' + btn_left).removeClass("dasabled");
                $('#' + btn_right).css({ cursor: 'pointer' });
                $('#' + btn_right).removeClass("dasabled");
            }
            else if (slider_count <= 0) {
                $('#' + btn_left).css({ cursor: 'auto' });
                $('#' + btn_left).addClass("dasabled");
            }
        }
    }
</script>

    <script type="text/javascript">
        $(document).ready(function() {
        SetSlider('HJContainer', 'hj_right', 'hj_left');
        });

    </script>

</head>

<body>
    
        <div class="sliderbox">
            <div id="hj_left" class="arrow left dasabled">
            </div>
            <div class="slider" id="HJContainer">
                <ul id="hjFile">
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
                        target="_blank" title="一等奖">
                        <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
                            height="104" alt="一等奖" />
                        <br />
                        一等奖</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
                        target="_blank" title="一等奖">
                        <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
                            height="104" alt="一等奖" />
                        <br />
                        一等奖</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
                        target="_blank" title="二等奖">
                        <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
                            height="104" alt="二等奖" />
                        <br />
                        二等奖</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
                        target="_blank" title="三等奖">
                        <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
                            height="104" alt="三等奖" />
                        <br />
                        三等奖</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
                        target="_blank" title="市一等奖">
                        <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
                            height="104" alt="市一等奖" />
                        <br />
                        市一等奖</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995.jpg"
                        target="_blank" title="三档">
                        <img src="/myupload/我是企事业/File/cc5122d9-d6ff-4e6e-82ba-85b2ae0ed995_small.jpg" width="138"
                            height="104" alt="三档" />
                        <br />
                        三档</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
                        target="_blank" title="你是何人">
                        <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
                            height="104" alt="你是何人" />
                        <br />
                        你是何人</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
                        target="_blank" title="你是何人">
                        <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
                            height="104" alt="你是何人" />
                        <br />
                        你是何人</a></li>
                    <li name="HJItem" class="current"><a href="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4.jpg"
                        target="_blank" title="天天">
                        <img src="/myupload/我是企事业/File/52df276c-31fe-441f-adad-a10388536fa4_small.jpg" width="138"
                            height="104" alt="天天" />
                        <br />
                        天天</a></li>
                </ul>
            </div>
            <div id="hj_right" class="arrow right">
            </div>
        </div>
    
</body>
</html>