Advanced Search

Round Slide Show With an Iris

/ Published in: JavaScript
Save to your folder(s)
Simle markup, simple CSS combined with ver straight forward javascript to produce some really cool effects.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The HTML:
  2.  <div id="outer">
  3. <div id ="slidediv1" class="I0">&nbsp;
  4. </div></div>
  5. ==============
  6. The CSS:
  7.  #slidediv1   {
  8.             background-color:dodgerblue;
  9.              height:0px;
  10.             width:0px;
  11.             margin:auto;
  12.             border: 150px solid  red;
  13.            border-radius:50%;
  14.             position:relative;
  15.             margin:auto;
  16.           }
  17. .I0  {           background-image:url(yourimage1.jpg);
  18.                 background-repeat:no-repeat;
  19.                 background-position:center center;}
  20. .I1 {           background-image:url(yourimage2.jpg);
  21.                 background-position:center center;}
  22. .I2  {           background-image:url(yourimage3.jpg);
  23.                 background-repeat:no-repeat;
  24.                 background-position:center center;}
  25.  .I3 {           background-image:url(yourimage4.jpg);
  26.                 background-position:center center;}
  27.  .I4  {           background-image:url(yourimage5.jpg);
  28.                 background-repeat:no-repeat;
  29.                 background-position:center center;}
  30.  .I5 {           background-image:url(yourimage6.jpg);
  31.                 background-position:center center;}          
  32. ===============
  33. The script:
  34. count=15;
  35.  bdr=150;
  36. big=0;
  37. doingAll=false;
  38. slideNo=0;
  39. slideTarget=0;
  40. function doLoop()
  41. {
  42.     el=document.getElementById('slidediv1');
  43.     el.style.display='block';
  44.     bdr-=10;
  45.     el.style.borderWidth=bdr+'px';
  46.     el.style.width=(el.offsetWidth-(bdr*2)+20)+'px';
  47.     el.style.height=(el.offsetHeight-(bdr*2)+20)+'px';
  48.     count--;
  49.     if (count>0) 
  50.     {
  51.         ST = setTimeout('doLoop()',50);
  52.     }
  53.     else
  54.     {
  55.         if (doingAll) ST=setTimeout('negLoop()',2000);
  56.     }
  57. }
  58. function negLoop()
  59. {
  60.     el=document.getElementById('slidediv1');
  61.     bdr+=10;
  62.     el.style.borderWidth=bdr+'px';
  63.     el.style.width=(el.offsetWidth-(bdr*2)-20)+'px';
  64.     el.style.height=(el.offsetHeight-(bdr*2)-20)+'px';
  65.     count++;
  66.     if (count<15) 
  67.     {
  68.         ST = setTimeout('negLoop()',50);
  69.    }
  70.    else
  71.    {
  72.         if (doingAll)  switchImage();
  73.     }
  74. }
  75. function switchImage()
  76. {
  77.         big++;
  78.         big=(big>5)? 0 : big;
  79.         el.className='I'+big;
  80.         doAll();
  81. }
  82. function doAll()
  83. {
  84.     doingAll=true; 
  85.     doLoop();
  86. }

URL: http://coboldinosaur.com/pages/round-slide-show.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.