jquery实现简单的图像传送带功能

博客第一篇，存一段简单的“图像传送带”功能的jquery代码。

 

css

<style type="text/css">
#featured-books{
    position:relative;
    background:#ddd;
    width:440px;
    height:186px;
    overflow:scroll;
    margin:lem auto;
    padding:0;
    text-align:center;
    z-index:2;
}
#featured-books covers{
    position:relative;
    width:840px;
    z-index:1;

    }
#featured-books a{
    float:left;
    margin:10px;
    height:146px;
    }
#featured-books .price{
    display:none;
    }
#featured-books .control{
    position:absolute;
    z-index:3;
    left:0;
    top:0;
    }
img.enlarged{
    position:absolute;
    z-index:5;
    cursor:pointer;
}
.enlarged-control{
    position:absolute;
    z-index:5;
}
</style>

以下是全部的jquery代码，没有注释，很糟糕：

jquery

 1 <SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
 2 <script type="text/javascript">
 3    $(document).ready(function(){
 4        var spacing = 140;
 5        $('#featured-books').css({
 6            'width':spacing * 3,
 7            'height':'166px',
 8            'overflow':'hidden'
 9            }).find('.covers a').css({
10                'float':'none',
11                'position':'absolute',
12                'left':1000
13                
14                });
15       
16       var setUpCovers = function(){
17           var $covers=$('#featured-books .covers a');
18           $covers.unbind('click');
19           
20           $covers.eq(0)
21            .css('left',0)
22            .click(function(event){
23                $covers.eq(0).animate({'left':spacing},'fast');
24                $covers.eq(1).animate({'left':spacing*2},'fast');
25                $covers.eq(2).animate({'left':spacing*3},'fast');
26                $covers.eq($covers.length-1)
27                 .css('left',-spacing)
28                 .animate({'left':0},'fast',function(){
29                     $(this).prependTo('#featured-books .covers');
30                     setUpCovers();
31                     })
32                 
33                 
34                 event.preventDefault();
35                });
36           $covers.eq(2)
37            .css('left',spacing * 2)
38            .click(function(event){
39                $covers.eq(0)
40                   .animate({'left':-spacing},'fast',function(){
41                       $(this).appendTo('#featured-books .covers');
42                       setUpCovers();                      
43                       });
44                $covers.eq(1).animate({'left':0},'fast');
45                $covers.eq(2).animate({'left':spacing},'fast');
46                $covers.eq(3)
47                   .css('left',spacing * 3)
48                   .animate({'left':spacing * 2}, 'fast');
49                event.preventDefault();               
50                });
51             $covers.eq(1)
52               .css('left',spacing);
53           
54           };
55           
56             setUpCovers()
57 
58        
59        });
60 
61 </script>

 

html

 1 <div id="featured-books">
 2     <div class="covers">
 3     <a href="http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_006.jpg">
 4     <img src='http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_006.jpg' width="120" height="148">
 5     </a>
 6     <a href="http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_003.jpg">
 7     <img src='http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_003.jpg' width="120" height="148">
 8     </a>
 9     <a href="http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_001.jpg">
10     <img src='http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_001.jpg' width="120" height="148">
11     </a>
12     <a href="http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_002.jpg">
13     <img src='http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_002.jpg' width="120" height="148">
14     </a>
15     <a href="http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_000.jpg">
16     <img src='http://img170.poco.cn/mypoco/myphoto/20120406/15/64589481201204061517463137541411182_000.jpg' width="120" height="148">
17     </a>
18  <!--=====================================-->
19 
20     </div>

 

 

转载于:https://www.cnblogs.com/superpear/archive/2012/05/05/2484667.html