Source code release of a jQuery plug-in with louddb eye images

 

 

Insert several effects:

 

 

Main Code:

 

/** * Created by aofengdaxia on 14-2-4. */(function ($) {    $.fn.slider = function (option) {        var defaults = {            stay: 3000,            type: box,            speed: 600,            direction: leftRight,            rowNum: 5,            columnNum: 10,            boxOut: { width: 0px, height: 0px, opacity: 0}        }        var index = 0;        var next = 1;        var timer;        var opt = $.extend(defaults, option);        var stage = $(this);        var sw = stage.width();        var sh = stage.height();        var pics = stage.children(img);        if ($(this).length > 1) {            pics.hide();            alert(please config the slider pic. make sure single object);            return;        }        stage.html();        if (opt.direction != leftRight && opt.type != box) {            stage.html(

); Stage. find (. tbStage ). append (pics); pics.css (float, left);} else {stage. append (pics); stage.css (white-space, nowrap);} var totalNum = pics. length; stage.css (overflow, hidden); pics.css (width, sw + px); pics.css (height, sh + px); if (opt. type = box) {pics. hide (); stage. append (); stage. append () stage.find(.slider1).html (); stage.find(.slider1).css (z-index, 0); lag (z-index, 1);} addBtn (); addTimer (); stage. find (. tPager ). click (function () {clearInterval (timer); var nIndex = $ (this ). attr (index); change (index, nIndex); index = nIndex; addTimer () ;}); function addBtn () {var pl = pics. length; var html =; html + = for (var I = 0; I <pl; I ++) {html + =} html + = stage. append (html);} function addTimer () {timer = setInterval (function () {next = parseInt (index) + 1; if (next> = totalNum) {next = 0;} change (index, next); index = next;}, opt. stay);} function change (I, n) {if (opt. type = box) {stage.find(.slider1).html (); MakeBoxes (pics. eq (I); $ (. boxes ). each (function () {$ (this ). animate (opt. boxOut, opt. speed) ;}) ;}else {MoveTo (I, n) ;} stage. find (. tPager [index = + I + ]).css (border, 0px solid black).css (backgroundColor, aquamarine); stage. find (. tPager [index = + n + bar handler .css (border, 1px solid red).css (backgroundColor, red);} function MakeBoxes (obj) {var r = opt. rowNum; var c = opt. columnNum; var bw = Math. round (sw/c); var bh = Math. round (sw/r); var htmls =; var ii = 0; for (var j = 0; j <r; j ++) {for (var I = 0; I <c; I ++) {var ml =-1 * bw * I; var mt =-1 * bh * j; htmls + =; htmls + = ii ++ ;}} stage.find(.slider2).html (htmls)} function MoveTo (I, n) {if (opt. direction = leftRight) {var ml =-1 * n * sw; pics. eq (0 ). animate ({marginLeft: ml + px}, opt. speed);} else {var mt =-1 * n * sh; stage. find (. tbStage ). animate ({marginTop: mt + px}, opt. speed) ;}}} (jQuery); usage

 

 

 

<Script type = text/javascript src = Script/jquery-1.4.2.min.js> </script> <script type = text/javascript src = Slider. js> </script> <Script type = text/javascript> $ (document ). ready (function () {$ (. focus ). slider ({type: move, direction: leftRight, stay: 4000}); $ (. focus2 ). slider ({type: move, direction: topBottom, stay: 3000}); $ (. focus3 ). slider ({type: box, columnNum: 30, rowNum: 20, stay: 2000}) ;}</script>
Source code: http://download.csdn.net/detail/aofengdaxia/6898081