[Tutorial] Rotating Images Using jQuery

by Nasyr - 05-04-2015, 05:32 PM
Freak
Posts:
3,294
Joined:
Jan 2015
Likes:
222
Credits:
4,953
Reputation:
119
2 Years of Service
#1
OP
Posted: 05-04-2015, 05:32 PM (This post was last modified: 06-04-2015, 10:11 PM by Nasyr.)
HTML

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script><script type="text/javascript" src="js/infinite-rotator.js"></script>
</pre>
<h1>Infinite Rotating Images Using jQuery (JavaScript)</h1>
<div id="rotating-item-wrapper"><img class="rotating-item" src="images/greenpeople.jpg" alt="a person entering a building" width="980" height="347" />
<img class="rotating-item" src="images/entrance.jpg" alt="photo of building across from our office" width="980" height="347" />
<img class="rotating-item" src="images/bluepeople.jpg" alt="building entrance with neon backlit walls" width="980" height="347" />
<img class="rotating-item" src="images/reflection3.jpg" alt="building lobby window reflections" width="980" height="347" />
<img class="rotating-item" src="images/reflection2.jpg" alt="reflection on building windows" width="980" height="347" />
<img class="rotating-item" src="images/manequine.jpg" alt="two manequines in window" width="980" height="347" /></div>
<pre>

CSS

Code:
#rotating-item-wrapper {
   position: relative;
   width: 980px;
   height: 347px;
}
.rotating-item {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
}

jQuery

Code:
$(window).load(function() { //start after HTML, images have loaded

   var InfiniteRotator =
   {
       init: function()
       {
           //initial fade-in time (in milliseconds)
           var initialFadeIn = 1000;

           //interval between items (in milliseconds)
           var itemInterval = 5000;

           //cross-fade time (in milliseconds)
           var fadeTime = 2500;

           //count number of items
           var numberOfItems = $('.rotating-item').length;

           //set current item
           var currentItem = 0;

           //show first item
           $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

           //loop through the items
           var infiniteLoop = setInterval(function(){
               $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

               if(currentItem == numberOfItems -1){
                   currentItem = 0;
               }else{
                   currentItem++;
               }
               $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

           }, itemInterval);
       }
   };

   InfiniteRotator.init();

});
Simple enough. Just put it where you want it to go and it'll display for ya Smile
http://bit.ly/2mbbjpP
Divine
Posts:
5,507
Joined:
Feb 2015
Likes:
599
Credits:
31,265
Reputation:
147
2 Years of Service
#2
Posted: 06-04-2015, 07:47 PM
Could you add an preview?
Nan Ihier Gelair Mordor
Posts:
2,610
Joined:
Jan 2015
Likes:
268
Credits:
7,771
Reputation:
85
Developer
2 Years of Service
#3
Posted: 06-04-2015, 07:53 PM
You may want to change the code to:

Code:
jQuery(document).ready(function() { //or just quick load xD

var InfiniteRotator =
{
init: function()
{
var $ = jQuery;
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;

//interval between items (in milliseconds)
var itemInterval = 5000;

//cross-fade time (in milliseconds)
var fadeTime = 2500;

//count number of items
var numberOfItems = $('.rotating-item').length;

//set current item
var currentItem = 0;

//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);

if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);

}, itemInterval);
}
};

InfiniteRotator.init();

});

Do not let your difficulties fill you with anxiety, after all it is only in the darkest nights that stars shine more brightly. - Ali(a.s)

Developer( PHP, Python, C++, HTML+CSS, JS I am available for Hire. Message Me for details.
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)