<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Author" content="博客名:仙梦之飘 QQ:894547549"> <meta name="Keywords" content=""> <meta name="Description" content=""> <head> <title>幻灯片插件制作</title> <style type="text/css"> *{margin: 0;padding: 0;} .wrap{ width:800px; margin:0 auto;} .slider{width: 400px;height: 300px; position: relative;margin: 10px auto;overflow: hidden;border:2px #c0c9cf solid;} .slider_pic li{width:400px;height: 300px;font:700 40px/300px "微软雅黑";text-align: center;color: #fff;list-style: none;} .num{width: 160px;position: absolute;right: 10px;bottom: 10px; z-index:10;} .num span{display: inline-block;color:#fff;font-weight:bold;cursor:pointer;margin-right: 5px;background: #db7093;width: 24px;height: 24px;text-align: center;line-height: 24px;border-radius: 10px;} .num span.cur{background:#000;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script> //jq 的easing效果添加,可以选择需要的效果来添加 jQuery.extend(jQuery.easing,{ easeOutBounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } }); (function($){ $.fn.extend({ mySlider:function(options){ var that=$(this); var configs={ 'slideCon':"ul",//容器 'slideTag':"li",//图片 'direction': 'vertical',//切换效果 'method' : 'click',//鼠标事件 'speed' : 5000 ,//切换时间 'animateSpeed':600,//运动速度 'auto':true//自动播放 }; options= $.extend(configs,options); var slide=that.find(configs.slideCon); var oLi=slide.find(configs.slideTag); var oLen=oLi.length; var oWidth=oLi.width(); var oHeight=oLi.height(); var oNum=$("<div class='num'></div>"); var iTimer=null; var index=0; var peel = 0; for(var i=0;i<oLen;i++){ oNum.append('<span>'+(i+1)+'</span>'); } slide.css({ 'position': 'absolute', 'top' : '0', 'left' : '0' }); that.append(oNum); var oSpan=oNum.find('span'); oSpan.eq(0).addClass("cur"); function SlideImg(n){ switch(options.direction){ case 'vertical': peel=parseInt(n * oHeight); slide.stop(true,false).animate({'top':-peel},configs.animateSpeed,"easeOutBounce"); break; case 'horizontal': oLi.css('float', 'left'); peel=parseInt(n*oWidth); slide.css({width:oLen*parseInt(oWidth)}).stop(true,false).animate({'left':-peel},configs.animateSpeed,"easeOutBounce"); break; case 'none': oLi.hide().eq(n).show(); break; case 'fade': oLi.css({ 'position': 'absolute', 'top' : '0', 'left' : '0' }) oLi.stop(true,false).animate({opacity: 0}, 800).css('z-index',1).eq(n).css('z-index',9).stop(true,false).animate({opacity: 1}, 800); break; } oSpan.removeClass("cur").eq(n).addClass("cur"); } if(configs.auto){ autoPlay(); } function autoPlay(){ iTimer=setInterval(function(){ SlideImg(index); index++; if(index==oLen){ index=0; } },configs.speed); } that.hover(function(){ clearInterval(iTimer); },function(){ if(configs.auto){ autoPlay();} }); oSpan.bind(options.method,function(){ if(configs.auto){clearInterval(iTimer);} index=oSpan.index(this); SlideImg(index); }); return this; } }) })(jQuery); $(function(){ $('#slider').mySlider({ 'direction': 'vertical', 'method' : 'mouseenter', 'speed' : 2000 }); $('#slider2').mySlider({ 'direction': 'fade', 'slideCon':"ol", 'method' : 'mouseenter', 'speed' : 3000 }); $('#slider3').mySlider({ 'direction': 'horizontal', 'method' : 'mouseenter', 'slideCon':"ol", 'speed' : 3000 }); $('#slider4').mySlider({ 'direction': 'none', 'method' : 'mouseenter', 'slideCon':"ol", 'speed' : 3000 }); }) </script> </head> <body> <div class="wrap"> <code> $('#slider').mySlider({ 'slideCon':"ul",//默认容器,可以选择自己需要的<br> 'slideTag':"li",//默认图片切换标签元素,可以选择自己需要的<br> 'direction': 'vertical', //默认是垂直方向,总共有4种vertical,horizontal,fade,none<br> 'method' : 'mouseenter',//默认是点击事件,根据自己需要的事件来填click,mouseenter<br> 'speed' : 2000 , //默认是切换时间5000<br> 'animateSpeed':600,//运动速度<br> 'auto':true//默认自动播放,不自动播放的值,false<br> 如果是设置fade效果按钮是在图片上面的需要设置.num的z-index:10以上的数值 }); </code> <h1>滚动垂直方向效果</h1> <div class="slider" id="slider"> <div class="slider_pic"> <ul> <li style="background: #228b22">1</li> <li style="background:#4169e1">2</li> <li style="background: #ffc0cb">3</li> <li style="background: #daa520">4</li> </ul> </div> </div> <h1>渐变效果效果</h1> <div class="slider" id="slider2"> <div class="slider_pic"> <ol> <li style="background: #228b22">1</li> <li style="background:#4169e1">2</li> <li style="background: #ffc0cb">3</li> <li style="background: #daa520">4</li> </ol> </div> </div> <h1>滚动水平方向效果</h1> <div class="slider" id="slider3"> <div class="slider_pic"> <ol> <li style="background: #228b22">1</li> <li style="background:#4169e1">2</li> <li style="background: #ffc0cb">3</li> <li style="background: #daa520">4</li> </ol> </div> </div> <h1>切换方向效果</h1> <div class="slider" id="slider4"> <div class="slider_pic"> <ol> <li style="background: #228b22">1</li> <li style="background:#4169e1">2</li> <li style="background: #ffc0cb">3</li> <li style="background: #daa520">4</li> </ol> </div> </div> </div> </body> </html>