淡入淡出效果模板 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
