{"id":14736,"date":"2013-08-09T08:00:10","date_gmt":"2013-08-09T08:00:10","guid":{"rendered":"http:\/\/www.adviceinteractivegroup.com\/?p=6284"},"modified":"2013-08-09T08:00:10","modified_gmt":"2013-08-09T08:00:10","slug":"custom-jquery-rotating-banner-tutorial","status":"publish","type":"post","link":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/","title":{"rendered":"Custom jQuery Rotating Banner Tutorial"},"content":{"rendered":"<p>As I was creating a banner the other day I realized it may be a ripe subject for a new blog post! So here we are: The Custom jQuery Rotating Banner Tutorial.<\/p>\n<p>Let&#8217;s begin. First off let&#8217;s setup our HTML.<\/p>\n<p>[code language=&#8221;html&#8221;]<br \/>\n&lt;div id=&#8221;banner&#8221;&gt;&lt;!&#8211;Begin full banner container&#8211;&gt;<br \/>\n&lt;div id=&#8221;rotating-tab&#8221;&gt;&lt;\/div&gt;&lt;!&#8211;The tab that shows which object is selected&#8211;&gt;<br \/>\n&lt;div id=&#8221;banner-shadow&#8221;&gt;&lt;\/div&gt;&lt;!&#8211;My accent shadow&#8211;&gt;<br \/>\n&lt;div id=&#8221;right&#8221;&gt;&lt;!&#8211;Begin box that holds each single object&#8211;&gt;<br \/>\n&lt;div class=&#8221;single s1&#8243; id=&#8221;box1&#8243;&gt;&lt;!&#8211;Begin object 1&#8211;&gt;<br \/>\n&lt;div class=&#8221;little-box box-1-little&#8221;&gt;&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;title&#8221;&gt;Box 1 Headline&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;description&#8221;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;big-box box-1&#8243;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;&lt;!&#8211;End object 1&#8211;&gt;<br \/>\n&lt;div class=&#8221;single s2&#8243; id=&#8221;box2&#8243;&gt;&lt;!&#8211;Begin object 2&#8211;&gt;<br \/>\n&lt;div class=&#8221;little-box box-2-little&#8221;&gt;&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;title&#8221;&gt;Box 2 Headline&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;description&#8221;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;big-box box-2&#8243;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;&lt;!&#8211;End object 2&#8211;&gt;<br \/>\n&lt;div class=&#8221;single s3&#8243; id=&#8221;box3&#8243;&gt;&lt;!&#8211;Begin object 3&#8211;&gt;<br \/>\n&lt;div class=&#8221;little-box box-3-little&#8221;&gt;&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;title&#8221;&gt;Box 3 Headline&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;description&#8221;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;big-box box-3&#8243;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;&lt;!&#8211;End object 3&#8211;&gt;<br \/>\n&lt;div class=&#8221;single s4&#8243; id=&#8221;box4&#8243;&gt;&lt;!&#8211;Begin object 4&#8211;&gt;<br \/>\n&lt;div class=&#8221;little-box box-4-little&#8221;&gt;&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;title&#8221;&gt;Box 4 Headline&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;description&#8221;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;\/div&gt;<br \/>\n&lt;div class=&#8221;big-box box-4&#8243;&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;&lt;!&#8211;End object 4&#8211;&gt;<br \/>\n&lt;\/div&gt;&lt;!&#8211;End box that holds each single object&#8211;&gt;<br \/>\n&lt;\/div&gt;&lt;!&#8211;End banner&#8211;&gt;<br \/>\n[\/code]<\/p>\n<p>If we break down the above, we essentially have:<\/p>\n<ul>\n<li>A large div with an id of &#8216;banner&#8217; that houses everything<\/li>\n<li>A div with an id of &#8216;rotating-tab&#8217; that slides to whichever object is selected<\/li>\n<li>A div with an id of &#8216;banner-shadow&#8217; that overlays my large images for a shadow effect<\/li>\n<li>4 div&#8217;s with a class of &#8216;single&#8217; that house a &#8216;title&#8217;, a &#8216;description&#8217;, a &#8216;little-box&#8217; div and a &#8216;big-box&#8217; div<\/li>\n<\/ul>\n<p>The &#8216;title&#8217; is our title text. The &#8216;description&#8217; is our description text, and the &#8216;little-box&#8217; is our thumbnail image to the right. That is the last we will mention these elements. You can style them however you want. The &#8216;big-box&#8217; is our full sized, rotating image, featured prominently when that &#8216;single&#8217; object is active. Now let&#8217;s get down to the nitty gritty &#8211; the javascript.<\/p>\n<p>We begin by initializing our banner:<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\nvar activeItem = $(&#8216;.single&#8217;).first();<br \/>\nvar nextItem = activeItem.next();<br \/>\n$(&#8216;.big-box&#8217;).css({&#8220;opacity&#8221;:&#8221;0&#8243;,&#8221;z-index&#8221;:&#8221;2&#8243;});<br \/>\n$(activeItem).addClass(&#8220;active&#8221;);<br \/>\n$(&#8216;.big-box&#8217;,activeItem).css({&#8220;opacity&#8221;:&#8221;1&#8243;,&#8221;z-index&#8221;:&#8221;3&#8243;});<br \/>\n[\/code]<\/p>\n<p>Line by line, we declare our variables for our first active object and the object that will be active next. We then set all div&#8217;s with the class &#8216;big-box&#8217;, which is our big image, to 0 opacity with a z-index of 2. Our active object, which we declared as variable activeItem gets the class &#8216;active&#8217; and the active object&#8217;s &#8216;big-box&#8217; gets full opacity and z-index of 3 to make it visible.<\/p>\n<p>Before we can turn on rotation we need to setup the processes for how it will run. We will create functions for queue&#8217;ing the next object, de-activating the current object, and activating the next object:<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\nvar queueNext = function() {<br \/>\nnextItem = activeItem.next();<br \/>\nif (nextItem.length === 0) {<br \/>\nnextItem = $(&#8216;.single&#8217;).first();<br \/>\n}<br \/>\n}<\/p>\n<p>var makeInactive = function() {<br \/>\n$(activeItem).removeClass(&#8220;active&#8221;);<br \/>\n$(&#8216;.big-box&#8217;,activeItem).css(&#8220;z-index&#8221;,&#8221;2&#8243;);<br \/>\n$(&#8216;.big-box&#8217;,activeItem).animate({<br \/>\nopacity:0<br \/>\n});<br \/>\n}<\/p>\n<p>var nextActive = function() {<br \/>\nactiveItem = nextItem;<br \/>\n$(activeItem).addClass(&#8220;active&#8221;);<br \/>\n$(&#8216;.big-box&#8217;).clearQueue();<br \/>\n$(&#8216;.big-box&#8217;,activeItem).animate({<br \/>\nopacity:1<br \/>\n});<br \/>\n$(&#8216;.big-box&#8217;,activeItem).css(&#8220;z-index&#8221;,&#8221;3&#8243;);<br \/>\n}<br \/>\n[\/code]<\/p>\n<p>Our queueNext() function establishes which object is the nextItem by using the jQuery .next() function. If we are on the last &#8216;single&#8217;, it queues up the very first one. Our makeInactive() function removes the active class from our active &#8216;single&#8217; object and sets the opacity to 0 and the z-index to 2 for the &#8216;big-box&#8217;. Finally, our nextActive() function sets the activeItem to the queued up nextItem. We use .clearQueue() to instantly switch to our next object otherwise those .animation() functions will stack and you will have to wait for them all to process. It then adds the active class to that next &#8216;single&#8217; object, and sets the opacity to 1 and z-index to 3 for that &#8216;single&#8217; object&#8217;s &#8216;big-box&#8217; image.<\/p>\n<p>We will then make sure our tab moves to wherever the active object is.<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\nvar rotateTab = function() {<br \/>\nvar animateTab = activeItem.position();<br \/>\ntabTop = animateTab.top;<br \/>\n$(&#8216;#rotating-tab&#8217;).clearQueue();<br \/>\n$(&#8216;#rotating-tab&#8217;).animate({<br \/>\ntop: tabTop<br \/>\n});<br \/>\n}<br \/>\n[\/code]<\/p>\n<p>The rotateTab() function finds the top Y edge of our active object and uses jQuery .animate() to set the top of the tab to that &#8216;single&#8217; objects top edge. We again use .clearQueue() so our tab instantly goes where we want it.<\/p>\n<p>Finally, we will put it all together in one function and create a timer to automatically cycle through our objects.<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\nvar rotateBanner = function() {<br \/>\nqueueNext();<br \/>\nmakeInactive();<br \/>\nnextActive();<br \/>\nrotateTab();<br \/>\n}<\/p>\n<p>var rotationTimer = setInterval(function() { rotateBanner() }, 3000);<br \/>\n[\/code]<\/p>\n<p>If you recall at the beginning, we initialized everything and setup our very first active object. With rotateBanner(), we queue the next object, turn the active one inactive, make the object on queue active, and move our tab to the new active object. We then setup a timer called rotationTimer set to execute the rotateBanner function every 3 seconds! Now it is time to add our mouse events.<\/p>\n<p>[code language=&#8221;javascript&#8221;]<br \/>\n$(&#8216;#banner&#8217;).mouseenter(function() {<br \/>\nclearTimeout(rotationTimer);<br \/>\n}).mouseleave(function() {<br \/>\nrotationTimer = setInterval(function() { rotateBanner() }, 3000);<br \/>\n});<\/p>\n<p>$(&#8216;.single&#8217;).mouseenter(function() {<br \/>\nnextItem = jQuery(this);<br \/>\nif (activeItem.attr(&#8220;id&#8221;) === nextItem.attr(&#8220;id&#8221;)) {<br \/>\nreturn;<br \/>\n}<br \/>\nelse {<br \/>\nmakeInactive();<br \/>\nnextActive();<br \/>\nrotateTab();<br \/>\n}<br \/>\n});<br \/>\n[\/code]<\/p>\n<p>Let&#8217;s go line by line. If the mouse enters anywhere on the banner region we stop our timer, effectively pausing rotation. As soon as it leaves the banner we re-start our timer. Pretty straight forward. Now we want the active object to be whichever object our mouse is hovering over. When we hover over a &#8216;single&#8217; object, we will designate that as the nextItem. We check to see if it is currently the active object. If it is, there is no need to proceed because we are already where we need to be. However if it is not, we proceed to call the functions to make the current active object inactive, make our queued object active, and then slide the tab to where it needs to be.<\/p>\n<p>This is all for our Custom jQuery Rotating Banner Tutorial! I hope we covered all the concepts needed to make your own fancy rotating banner. The demo is here, the CSS file here and the JS file here. If you do use this, post a comment and share what you have come up with! Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As I was creating a banner the other day I realized it may be a ripe subject for a new [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":8395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[17],"tags":[],"class_list":["post-14736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Custom jQuery Rotating Banner Tutorial | Advice Local<\/title>\n<meta name=\"description\" content=\"Learn how to create a custom rotating banner with mouse events using jQuery through this step by step tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom jQuery Rotating Banner Tutorial | Advice Local\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a custom rotating banner with mouse events using jQuery through this step by step tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Advice Local\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/advicelocallistings\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-09T08:00:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2017\/06\/listing-scan.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"379\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Advice Local\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Custom jQuery Rotating Banner Tutorial | Advice Local\" \/>\n<meta name=\"twitter:creator\" content=\"@advice_local\" \/>\n<meta name=\"twitter:site\" content=\"@advice_local\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Advice Local\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/\"},\"author\":{\"name\":\"Advice Local\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/person\\\/24c2a8bbb06a68d8e0642a3283d7f1f4\"},\"headline\":\"Custom jQuery Rotating Banner Tutorial\",\"datePublished\":\"2013-08-09T08:00:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/\"},\"wordCount\":1225,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/listing-scan.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/\",\"name\":\"Custom jQuery Rotating Banner Tutorial | Advice Local\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/listing-scan.jpg\",\"datePublished\":\"2013-08-09T08:00:10+00:00\",\"description\":\"Learn how to create a custom rotating banner with mouse events using jQuery through this step by step tutorial.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/listing-scan.jpg\",\"contentUrl\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/listing-scan.jpg\",\"width\":379,\"height\":240,\"caption\":\"Listing Scan\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/custom-jquery-rotating-banner-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom jQuery Rotating Banner Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/\",\"name\":\"Advice Local\",\"description\":\"Local Digital Marketing Software Solutions and Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#organization\",\"name\":\"Advice Local\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo.png\",\"width\":265,\"height\":55,\"caption\":\"Advice Local\"},\"image\":{\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/advicelocallistings\\\/\",\"https:\\\/\\\/x.com\\\/advice_local\",\"https:\\\/\\\/www.instagram.com\\\/advice_local\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/#\\\/schema\\\/person\\\/24c2a8bbb06a68d8e0642a3283d7f1f4\",\"name\":\"Advice Local\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/?s=96&d=mm&r=g\",\"caption\":\"Advice Local\"},\"url\":\"https:\\\/\\\/www.advicelocal.com\\\/blog\\\/author\\\/advice-local\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom jQuery Rotating Banner Tutorial | Advice Local","description":"Learn how to create a custom rotating banner with mouse events using jQuery through this step by step tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Custom jQuery Rotating Banner Tutorial | Advice Local","og_description":"Learn how to create a custom rotating banner with mouse events using jQuery through this step by step tutorial.","og_url":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/","og_site_name":"Advice Local","article_publisher":"https:\/\/www.facebook.com\/advicelocallistings\/","article_published_time":"2013-08-09T08:00:10+00:00","og_image":[{"width":379,"height":240,"url":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2017\/06\/listing-scan.jpg","type":"image\/jpeg"}],"author":"Advice Local","twitter_card":"summary_large_image","twitter_title":"Custom jQuery Rotating Banner Tutorial | Advice Local","twitter_creator":"@advice_local","twitter_site":"@advice_local","twitter_misc":{"Written by":"Advice Local","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/"},"author":{"name":"Advice Local","@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/person\/24c2a8bbb06a68d8e0642a3283d7f1f4"},"headline":"Custom jQuery Rotating Banner Tutorial","datePublished":"2013-08-09T08:00:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/"},"wordCount":1225,"commentCount":2,"publisher":{"@id":"https:\/\/www.advicelocal.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2017\/06\/listing-scan.jpg","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/","url":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/","name":"Custom jQuery Rotating Banner Tutorial | Advice Local","isPartOf":{"@id":"https:\/\/www.advicelocal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2017\/06\/listing-scan.jpg","datePublished":"2013-08-09T08:00:10+00:00","description":"Learn how to create a custom rotating banner with mouse events using jQuery through this step by step tutorial.","breadcrumb":{"@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#primaryimage","url":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2017\/06\/listing-scan.jpg","contentUrl":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2017\/06\/listing-scan.jpg","width":379,"height":240,"caption":"Listing Scan"},{"@type":"BreadcrumbList","@id":"https:\/\/www.advicelocal.com\/blog\/custom-jquery-rotating-banner-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.advicelocal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Custom jQuery Rotating Banner Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/www.advicelocal.com\/blog\/#website","url":"https:\/\/www.advicelocal.com\/blog\/","name":"Advice Local","description":"Local Digital Marketing Software Solutions and Services","publisher":{"@id":"https:\/\/www.advicelocal.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.advicelocal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.advicelocal.com\/blog\/#organization","name":"Advice Local","url":"https:\/\/www.advicelocal.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2026\/04\/logo.png","contentUrl":"https:\/\/www.advicelocal.com\/blog\/wp-content\/uploads\/2026\/04\/logo.png","width":265,"height":55,"caption":"Advice Local"},"image":{"@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/advicelocallistings\/","https:\/\/x.com\/advice_local","https:\/\/www.instagram.com\/advice_local"]},{"@type":"Person","@id":"https:\/\/www.advicelocal.com\/blog\/#\/schema\/person\/24c2a8bbb06a68d8e0642a3283d7f1f4","name":"Advice Local","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Advice Local"},"url":"https:\/\/www.advicelocal.com\/blog\/author\/advice-local\/"}]}},"_links":{"self":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/posts\/14736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/comments?post=14736"}],"version-history":[{"count":0,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/posts\/14736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/media\/8395"}],"wp:attachment":[{"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/media?parent=14736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/categories?post=14736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.advicelocal.com\/blog\/wp-json\/wp\/v2\/tags?post=14736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}