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.


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.