JQuery 그림 슬라이딩 플러그인

 1 <div id="focus">
 2                 <ul>
 3                     <li>
 4                         <a href="#"><img src="images/index2013/jdt.gif" /> </a>
 5                     </li>
 6                     <li>
 7                         <a href="#"><img src="images/index2013/jdt.gif" /> </a>
 8                     </li>
 9                     <li>
10                         <a href="#"><img src="images/index2013/jdt.gif" /> </a>
11                     </li>
12                 </ul>
13             </div>

 1 <script type="text/javascript"
 2             src="http://lib.sinaapp.com/js/jquery/1.6/jquery.js "></script>
 3         <script type="text/javascript">
 4     $(document).ready(function() {
 5         slide();
 6     });
 7     function slide() {
 8         var focusDivName = "#focus";//     div id
 9         var sWidth = $(focusDivName).width(); //         （    ）
10         var len = $(focusDivName + " ul li").length; //        
11         var index = 0;
12         var picTimer;
13 
14         //                    ，     、       
15         var btn = "<div class='btnBg'></div><div class='btn'>";
16         for ( var i = 0; i < len; i++) {
17             btn += "<span></span>";
18         }
19         btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
20         $(focusDivName).append(btn);
21         $(focusDivName + " .btnBg").css("opacity", 0.0);
22 
23         //             ，        
24         $(focusDivName + " .btn span").css("opacity", 0.4).mouseover(
25                 function() {
26                     index = $(focusDivName + " .btn span").index(this);
27                     showPics(index);
28                 }).eq(0).trigger("mouseover");
29 
30         //    、          
31         $(focusDivName + " .preNext").css("opacity", 0.2).hover(function() {
32             $(this).stop(true, false).animate({
33                 "opacity" : "0.5"
34             }, 300);
35         }, function() {
36             $(this).stop(true, false).animate({
37                 "opacity" : "0.2"
38             }, 300);
39         });
40 
41         //      
42         $(focusDivName + " .pre").click(function() {
43             index -= 1;
44             if (index == -1) {
45                 index = len - 1;
46             }
47             showPics(index);
48         });
49 
50         //      
51         $(focusDivName + " .next").click(function() {
52             index += 1;
53             if (index == len) {
54                 index = 0;
55             }
56             showPics(index);
57         });
58 
59         //        ，   li            ，           ul     
60         $(focusDivName + " ul").css("width", sWidth * (len));
61 
62         //               ，         
63         $(focusDivName).hover(function() {
64             clearInterval(picTimer);
65         }, function() {
66             picTimer = setInterval(function() {
67                 showPics(index);
68                 index++;
69                 if (index == len) {
70                     index = 0;
71                 }
72             }, 4000); //  4000         ，  ：  
73         }).trigger("mouseleave");
74 
75         //       ，     index        
76         function showPics(index) { //     
77             var nowLeft = -index * sWidth; //   index   ul   left 
78             $(focusDivName + " ul").stop(true, false).animate({
79                 "left" : nowLeft
80             }, 300); //   animate()  ul         position
81             // //              
82             $(focusDivName + " .btn span").stop(true, false).animate({
83                 "opacity" : "0.4"
84             }, 300).eq(index).stop(true, false).animate({
85                 "opacity" : "1"
86             }, 300); //               
87         }
88     };
89 </script>

  1 ul,li {
  2     list-style: none;
  3 }
  4 
  5 img {
  6     border: 0;
  7 }
  8 
  9 .wrapper {
 10     width: 625px;
 11     margin: 0 auto;
 12     padding-bottom: 50px;
 13 }
 14 
 15 h1 {
 16     height: 50px;
 17     line-height: 50px;
 18     font-size: 22px;
 19     font-weight: normal;
 20     font-family: "Microsoft YaHei", SimHei;
 21     margin-bottom: 20px;
 22 }
 23 
 24 /* focus */
 25 #focus {
 26     width: 625px;
 27     height: 220px;
 28     overflow: hidden;
 29     position: relative;
 30 }
 31 
 32 #focus ul {
 33     z-index: 0;
 34     height: 220px;
 35     position: absolute;
 36     padding-left: 0px;
 37 }
 38 
 39 #focus ul li {
 40     float: left;
 41     width: 625px;
 42     height: 220px;
 43     overflow: hidden;
 44     position: relative;
 45     background: #000;
 46 }
 47 
 48 #focus ul li div {
 49     position: absolute;
 50     overflow: hidden;
 51 }
 52 
 53 #focus .btnBg {
 54     position: absolute;
 55     width: 625px;
 56     height: 20px;
 57     left: 0;
 58     bottom: 0;
 59     background: #000;
 60 }
 61 
 62 #focus .btn {
 63     position: absolute;
 64     width: 625px;
 65     height: 10px;
 66     padding: 5px 10px;
 67     right: 0;
 68     bottom: 0;
 69     text-align: right;
 70 }
 71 
 72 #focus .btn span {
 73     display: inline-block;
 74     _display: inline;
 75     _zoom: 1;
 76     width: 25px;
 77     height: 10px;
 78     _font-size: 0;
 79     margin-left: 5px;
 80     cursor: pointer;
 81     background: #fff;
 82 }
 83 
 84 #focus .btn span.on {
 85     background: #fff;
 86 }
 87 
 88 #focus .preNext {
 89     width: 45px;
 90     height: 100px;
 91     position: absolute;
 92     top: 60px;
 93     background: url(images/index2013/sprite.png) no-repeat 0 0;
 94     cursor: pointer;
 95 }
 96 
 97 #focus .pre {
 98     left: 0;
 99 }
100 
101 #focus .next {
102     right: 0;
103     background-position: right top;
104 }