淡入淡出效果模板 js

html文件中：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>jQuery Slide</title>
 6         <link href="css/jquery-slide.css" rel="stylesheet" media="screen">
 7     </head>
 8     
 9     <body>
10         <div class="slide-pic">
11             <ul class="slide-viewport">
12                 <li style="z-index:2;">
13                     <a href="javascript:void(0);">
14                         <img src="images/sample1.jpg" width="600" height="300" alt="">
15                     </a>
16                 </li>
17                 <li>
18                     <a href="javascript:void(0);">
19                         <img src="images/sample2.jpg" width="600" height="300" alt="">
20                     </a>
21                 </li>
22                 <li>
23                     <a href="javascript:void(0);">
24                         <img src="images/sample3.jpg" width="600" height="300" alt="">
25                     </a>
26                 </li>
27             </ul>
28         </div>
29         <script src="js/jquery-1.6.2.min.js"></script>
30         <script src="js/jquery.slide.js"></script>
31         <script>
32             $(".slide-pic").slidePic({600,height:300,autoSlideTime:2000,controllerLeft:true});<!--此处只能是四个参数-->
33         </script>
34     </body>
35 
36 </html>

css样式：

 1 .slide-pic ul,.slide-pic li,.slide-pic img{margin:0;padding:0;border:0;vertical-align:top;}
 2 .slide-pic{position:relative;overflow:hidden;}
 3 .slide-pic .slide-viewport li{position:absolute;left: 0;top:0;list-style:none;}
 4 /* 底部控制器样式 */
 5 .slide-pic .controller-bottom{left:50%;bottom:10px;position:absolute;z-index:99;}
 6 .slide-pic .controller-bottom li{background:url("../images/focus-img-button.png") no-repeat 0 0;cursor:pointer;height:9px;float:left;margin-right:10px;overflow:hidden;width:9px;
                                     _background-image:url("../images/focus-img-button-png8.png");}
 7 .slide-pic .controller-bottom li.current {background-position:0 -9px;}
 8 /* 两侧控制器样式 */
 9 .slide-pic .controller-side-left,.slide-pic .controller-side-right{
10     position:absolute;height:40px;width:20px;top:50%;margin-top:-20px;z-index:99;background:rgba(0,0,0,0.3);
11     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);zoom:1;border-radius:0 20px 20px 0;cursor:pointer;
12     background-image:url("../images/slide-arrow.png");
13     background-position:3px 12px;
14     background-repeat:no-repeat;
15     _background-image:url("../images/slide-arrow-png8.png");
16 }
17 :root .slide-pic .controller-side-left,:root .slide-pic .controller-side-right{filter:none9;}/*for IE9*/
18 .slide-pic .controller-side-left{left:0;margin-left:-20px;}
19 .slide-pic .controller-side-right{right:0;border-radius:20px 0 0 20px;background-position:-17px 12px;margin-right:-20px;}

js文件：

  1 (function ($) {
  2     var settings;
  3 
  4     $.fn.slidePic = function (callerSettings) {
  5         settings = $.extend({//将下面的说有属性的值都合并到全局对象settings中，后面的settings可以调用;
  6              600,
  7             height: 300,
  8             controllerBottom: true,//控制底部的原点的控制按钮是否出现;
  9             controllerLeft: true,//控制左右两侧的按钮是否出现；
 10             autoSlideTime: 5000//图片切换的间隔时间;
 11         }, callerSettings || {});
 12 
 13         //初始化
 14         var picsLength = this.find(".slide-viewport > li").length;//只需要将.slide-viewport改成自己代码中所设置的class即可;
 15         picsLength = parseInt(picsLength);//找到html中存在的li的个数，并将其转换为整型;此处为3
 16 
 17         this.css({
 18              settings.width,
 19             height: settings.height
 20         });
 21 
 22         if (settings.controllerBottom) {
 23             createControllerBottom.call(this, picsLength);//调用创建底部按钮的代码;
 24         }
 25         if (settings.controllerLeft) {
 26             createControllerLeft.call(this);//调用两侧按钮出现的代码;
 27         }
 28 
 29         var controllerBottomHandler = $(".controller-bottom").find("li");//底部按钮中的li元素;
 30         var controllerSideHandler = $(".controller-side-left,.controller-side-right");//选择两侧的按钮;
 31         var controllerSideLeftHandler = $(".controller-side-left");//单独选取左侧的按钮;
 32         var controllerSideRightHandler = $(".controller-side-right");//单独选取右侧的按钮;
 33         var slidePicHandler = this.find("li");//找到左右的li元素;
 34         var preIndex = 0;
 35         var timer = null;
 36         controllerBottomHandler.mouseover(function() {
 37             var index = $(this).index();//获得当前鼠标放在底部按钮上是第几个按钮;
 38             showNext(index);
 39         });
 40         
 41         this.mouseover(function(){//控制两侧的按钮，如果要求显示时，则出现在区域的两侧;
 42             clearTimeout(timer);
 43             controllerSideLeftHandler.stop().animate({marginLeft:0},"normal");
 44             controllerSideRightHandler.stop().animate({marginRight:0},"normal");
 45         }).mouseleave(function() {
 46             timer = setTimeout(function() {
 47                 var index = controllerBottomHandler.filter(".current").index();
 48                 index = (index + 1) % picsLength;
 49                 showNext(index);
 50                 timer = setTimeout(arguments.callee,settings.autoSlideTime);
 51             }, settings.autoSlideTime);
 52                 //鼠标移开时,两侧按钮不显示;
 53             controllerSideLeftHandler.stop().animate({marginLeft:"-20px"},"normal");
 54             controllerSideRightHandler.stop().animate({marginRight:"-20px"},"normal");
 55         }).mouseleave();
 56 
 57 
 58         //当点击两侧的按钮时，控制图片以淡入淡出的效果实现;
 59         controllerSideHandler.click(function(){
 60             var index = controllerBottomHandler.filter(".current").index();//获取当前显示为红色的li元素是第几个,从0开始计数;
 61             if($(this).hasClass("controller-side-left")){//如果当前点击的是左侧的按钮;
 62                 index = (index - 1) % picsLength;//
 63                 if(index < 0){
 64                     index = picsLength + index;
 65                 }
 66             }
 67             if($(this).hasClass("controller-side-right")){//如果当前点击的是右侧的按钮;
 68                 index = (index + 1) % picsLength;
 69             }
 70             showNext(index);
 71         });
 72 
 73 
 74         //根据底部的红色切换,显示下一个图片;
 75         function showNext(index) {
 76             controllerBottomHandler.removeClass("current").eq(index).addClass("current");//使放上去的这个按钮的颜色变为红色;
 77             slidePicHandler.css("zIndex", "").eq(preIndex).css("zIndex", 1).end().eq(index).css({//连续设置几个li的样式;
 78                 "zIndex": 2,
 79                 "opacity": 0
 80             }).stop().animate({//表示前面的li样式设置好后，就停止，然后开始逐渐使图片的透明度变为1（完全显示）;
 81                 "opacity": 1
 82             }, "normal");
 83             preIndex = index;
 84         }
 85         
 86         return this;
 87     }
 88 
 89     //创建底部按钮的代码;
 90     var createControllerBottom = function (picsLength) {
 91         var controllerWidth = picsLength * 19; //19为底部控制器圆点的宽度outerWidth
 92         var controllerBottomHtml = "";
 93         for (var i = 0; i < picsLength; i++) {
 94             controllerBottomHtml += "<li></li>"
 95         }
 96         controllerBottomHtml = "<ul class='controller-bottom'>" + controllerBottomHtml + "</ul>";
 97         this.append(controllerBottomHtml);//创建了底部按钮显示的代码;
 98         this.find(".controller-bottom").css({//设置底部按钮的样式，使得默认情况下第一个按钮的眼的为红色;
 99              controllerWidth,
100             marginLeft: -(controllerWidth / 2)
101         }).find("li:first").addClass("current")
102     };
103 
104 
105 
106     var createControllerLeft = function () {//创建幻灯片两侧的按钮;
107         var controllerLeftHtml = '<span class="controller-side-left"></span><span class="controller-side-right"></span>';
108         this.append(controllerLeftHtml);
109         
110     };
111 })(jQuery);

注意点：images文件夹和 css文件夹以及 js文件夹实在同一级目录中，而且导入的js库文件版本不要太高，有时会出错，该模板用的jquery文件为：jquery-1.6.2.min.js