淡入淡出效果模板 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({width: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:none\9;}/*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 width: 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 width: 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 width: 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
原文链接：http://www.cnblogs.com/laogai/p/3399804.html
浙公网安备 33010602011771号