Create a multi-function carousel image plug-in using jquery.

Create a multi-function carousel image plug-in using jquery.

This is a multi-function slide plug-in that supports multiple configurations. css styles are extracted from the Internet, and the code in the plug-in is original and light-sprayed ~

; (Function ($) {"use strict"; var methods = {o: {next: "# cycle-next", prev: "# cycle-prev", pager: "# cycle-nav", slider: "# beauty-slider", timeLine: "# timeLine", innerTimeLine: "# inner-timeLine", timeLineNode: "# timeLine-node", sliderItemClass: "sliderItem", nodeActive: "node_active", displays: {fade: "fade", left: "left", right: "right ", top: "top", bottom: "bottom"}, navHtml: "<a href = 'Javascript:; 'class = '&'>? </A> ", navConfig: {navBoxClass:" cycle-nav ", navActiveClass:" activeSlide ", showNum: true }}, generateId: function () {return "-" + new Date (). getTime () ;}, generateTemplate: function (id, settings) {var htmls = new Array (); htmls. push ('<div class = "slider-wrap">'); htmls. push ('<div class = "cycleslider-wrap">'); htmls. push ('<div id = "beauty-slider' + id + '" class = "cycleslider"> </div>'); if (settings. IsArrow) {htmls. push ('<a id = "cycle-prev' + id + '" class = "cycle-prev" href = "javascript :; "title =" try to flip the left arrow key "> Prev </a> '); htmls. push ('<a id = "cycle-next' + id + '" class = "cycle-next" href = "javascript :; "title =" Try the right arrow key to flip the page "> Next </a> ');} if (settings. showTimeLine) {htmls. push ('<div class = "timeLine" id = "timeLine' + id + '">'); htmls. push ('<div class = "innerTimeLine" id = "inner-timeLine' + id + '" style = "wi Dth: 0px; "> </div> '); htmls. push ('<div id = "timeLine-node' + id +'"> </div> '); htmls. push ('</div>');} if (settings. isNav) {htmls. push ('<div id = "cycle-nav' + id + '" class = "cycle-nav"> </div>');} htmls. push ('</div>'); htmls. push ('<div class = "loader"> </div>'); htmls. push ('</div>'); return htmls;}, init: function (dom, options) {var s = this; var defaults = {url: "", data: {}, auto: false, time: 2000, overLay: false, isArrow: true, isNav: true, showTimeLine: false, showTip: false, keyboard: true, display: s. o. displays. fade, navConfig: s. o. navConfig}; var settings = $. extend ({}, defaults, options); var id = s. generateId (); $ (". slider-wrap. loader "). show (); var imgArray = s. returnImgArray (dom, settings); if (imgArray! = Null & imgArray. length> 0) {s ["imgcnt" + id] = imgArray. length; optional (dom).html (s. generateTemplate (id, settings ). join ('')). show (); var slider = $ (s. o. slider + id); var pager = $ (s. o. pager + id); var timeLineNode = $ (s. o. timeLineNode + id); s. o. innerW = $ (dom ). width ()-20; var imgHtml = ""; var pageHtml = ""; var timeHtml = ""; $. each (imgArray, function (index, item) {var picClass = index = 0? S. o. sliderItemClass: s. o. sliderItemClass + "none"; var navClass = index = 0? Settings. navConfig. navActiveClass: ""; imgHtml + = '<div class = "' + picClass + '"> <a href = "' + (s. isParamValid (item. picUrl )? Item. picUrl: "javascript:;") + '">  </a> </div>'; pageHtml + = s. o. navHtml. replace ("? ", Settings. navConfig. showNum? Index + 1 :""). replace ("&", navClass); var left = s. o. innerW * index/s ["imgcnt" + id]-13; var nodeClass = index = 0? S. o. nodeActive: ""; timeHtml + = '<div class = "node' + nodeClass +'" style = "left: '+ left + 'px;"> '; if (settings. showTip) {timeHtml + = '<div class = "tooltip">' + item. title + '</div>';} timeHtml + = '</div>';}); slider.html (imgHtml); if (settings. isNav) {if (settings. navConfig. navBoxClass) {pager. removeClass (s. o. navConfig. navBoxClass ). addClass (settings. navConfig. navBoxClass);} pager.html (pageHtml );} If (settings. showTimeLine) {timeLineNode.html (timeHtml);} slider. width (s. o. innerW); slider. find (". "+ s. o. sliderItemClass ). width (s. o. innerW); $ (s. o. timeLine + id ). width (s. o. innerW); if (settings. overLay) {if ($. fn. layerModel) {$ (dom ). layerModel ({staySame: true, blurClose: true});} else {alert ("Please introduce the layerModel plug-in first! ") ;}} S. initBind (id, settings); s ["currentIndex" + id] = 0; var totalTime = settings. time/1000 * s ["imgcnt" + id]; if (settings. auto) {if (settings. showTimeLine) {s. startTimeLine (id, totalTime, settings);} else {s. o. timeInterval = window. setInterval (function () {$ ("# cycle-next" + id ). click () ;}, settings. time) ;}} else {return;} return dom ;}, startTimeLine: function (id, time, settings) {Var s = this; var $ innerTimeLine = $ (s. o. innerTimeLine + id); var crnW = $ innerTimeLine. width (); for (var I = 0; I <s ["imgcnt" + id]; I ++) {var autoW = Math. floor (s. o. innerW * I/s ["imgcnt" + id]); if (crnW = autoW) {s ["currentIndex" + id] = I; s. updateImgLink (id, settings); $ (s. o. timeLineNode + id ). find ("div. node "). eq (I ). addClass (s. o. nodeActive ). siblings (). removeClass (s. o. nodeActive);} I F (crnW <s. o. innerW) {$ innerTimeLine. animate ({width: "+ = 1px"}, time, 'linear ', function () {s. startTimeLine (id, time, settings) ;});} else {$ innerTimeLine. width (0); s. startTimeLine (id, time, settings) ;}}, initBind: function (id, settings) {var s = this; var isEasing =$. easing. def; if (settings. isArrow) {$ ("# cycle-prev" + id + ", # cycle-next" + id1_.css ({opacity: "0"}); $ (". cycleslider-wrap "). Hover (function () {$ ("# cycle-prev" + id ). stop (). animate ({left: "-31", opacity: "1"}, 200, isEasing? "EaseOutCubic": ""); $ ("# cycle-next" + id ). stop (). animate ({right: "-31", opacity: "1"}, 200, isEasing? "EaseOutCubic": "") ;}, function () {$ ("# cycle-prev" + id ). stop (). animate ({left: "-50", opacity: "0"}, 400, isEasing? "EaseInCubic": ""); $ ("# cycle-next" + id ). stop (). animate ({right: "-50", opacity: "0"}, 400, isEasing? "EaseInCubic": "") ;}; $ ("# cycle-prev" + id ). bind ("click", function () {s ["currentIndex" + id] = s ["currentIndex" + id] <= 0? S ["imgcnt" + id]-1: s ["currentIndex" + id]-1; s. updateImgLink (id, settings) ;}); $ ("# cycle-next" + id ). bind ("click", function () {s ["currentIndex" + id] = s ["currentIndex" + id] <s ["imgcnt" + id]-1? S ["currentIndex" + id] + 1: 0; s. updateImgLink (id, settings) ;}}$ (". slider-wrap. loader "). hide (); $ ("a", s. o. pager + id ). bind ("click", function () {if ($ (this ). hasClass (s. o. navConfig. navActiveClass) {return false;} s ["currentIndex" + id] = $ (this ). index (); s. updateImgLink (id, settings) ;}); if (settings. auto & settings. showTimeLine) {$ ("div. node ", s. o. timeLineNode + id ). bind ({click: function () {If ($ (this ). hasClass (s. o. nodeActive) {return false;} s ["currentIndex" + id] = $ (this ). index (); s. updateImgLink (id, settings);}, mouseover: function () {if (settings. showTip) {$ (this ). find (". tooltip "). fadeIn () ;}}, mouseout: function () {if (settings. showTip) {$ (this ). find (". tooltip "). fadeOut () ;}}) ;}// if (settings. keyboard) {$ (window ). keydown (function (event) {// <--- if (event. keyCode ==37) {$ ("# cycle-prev" + id ). click ();} // ---> if (event. keyCode = 39) {$ ("# cycle-next" + id ). click () ;}}) ;}}, updateImgLink: function (id, settings) {var s = this; var index = s ["currentIndex" + id]; var display = settings. display; var isEasing = $. easing. def; var $ items = $ ("div. "+ s. o. sliderItemClass, s. o. slider + id); switch (display) {case s. o. displays. fade: $ items. eq (index ). show (). sibl Ings (). hide (); break; case s. o. displays. left: incluitems.css ({position: "absolute", top: 0, left: s. o. innerW }). hide (); $ items. eq (index ). animate ({left: 0}, 100, isEasing? "EaseOutCubic ":""). show (); $ (s. o. slider + id ). height (s. getImgMaxHeight (id); break; case s. o. displays. right: incluitems.css ({position: "absolute", top: 0, right: s. o. innerW }). hide (); $ items. eq (index ). animate ({right: 0}, 100, isEasing? "EaseOutCubic ":""). show (); $ (s. o. slider + id ). height (s. getImgMaxHeight (id); break; case s. o. displays. top: break; case s. o. displays. bottom: break; default: break;} $ ("a", s. o. pager + id ). eq (index ). addClass (settings. navConfig. navActiveClass ). siblings (). removeClass (settings. navConfig. navActiveClass); // update the progress bar if (settings. auto & settings. showTimeLine) {var indexWidth = Math. floor (s. o. innerW * Index/s ["imgcnt" + id]); $ (s. o. innerTimeLine + id ). animate ({width: indexWidth + "px"}, 500, 'linear ', function () {$ (s. o. timeLineNode + id ). find ("div. node "). eq (index ). addClass (s. o. nodeActive ). siblings (). removeClass (s. o. nodeActive) ;}}, getImgMaxHeight: function (id) {var s = this; var slider =$ (s. o. slider + id); var maxHeight = 0; $. each (slider. find ("img"), function (index, item) {var img Height = this. height; maxHeight = Math. max (maxHeight, imgHeight) ;}); return maxHeight ;}, returnImgArray: function (dom, settings) {var s = this; var imgArray = new Array (); var url = settings. url; if (s. isParamValid (url) {$. ajax ({url: url + "? T = "+ new Date (). getTime (), type: 'post', async: false, data: settings. data, dataType: 'json', success: function (data) {if (s. isParamValid (data) {$. each (data, function (index, item) {imgArray. push (item) ;}}}, error: function () {alert ("the image data source address is invalid... "); return null ;}, complete: function (XHR, TS) {XHR = null ;}}) ;}else {var imgs =$ (dom ). find ("img"); if (imgs! = Null & imgs. length> 0) {$. each (imgs, function (I, o) {var pic = new Object (); pic. picUrl = $ (o ). parent (""). attr ("href"); pic. picPath = $ (o ). attr ("src"); pic. width = $ (o ). attr ("width"); pic. height = $ (o ). attr ("height"); pic. title = $ (o ). attr ("title"); imgArray. push (pic) ;}}}return imgArray ;}, isParamValid: function (v) {return! (V = "" | v = null | v = undefined) ;};$. fn. beautyFocus = function (options) {return this. each (function (index, item) {methods. init (item, options) ;};}) (jQuery );

The above is all the content of this article. I hope you will like it.