Posted By

COBOLdinosaur on 02/15/13


Tagged

image csshtmlslide showround


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Beppoi


Round Slide Show With an Iris


 / Published in: JavaScript
 

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

Simle markup, simple CSS combined with ver straight forward javascript to produce some really cool effects.

  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. }

Report this snippet  

You need to login to post a comment.