Return to Snippet

Revision: 62307
at February 15, 2013 06:41 by COBOLdinosaur


Initial Code
The HTML:
 <div id="outer">
<div id ="slidediv1" class="I0">&nbsp;
</div></div>
==============
The CSS:
 #slidediv1   {
            background-color:dodgerblue;
             height:0px;
            width:0px;
            margin:auto;
            border: 150px solid  red;
           border-radius:50%;
            position:relative;
            margin:auto;
          }
.I0  {           background-image:url(yourimage1.jpg);
                background-repeat:no-repeat;
                background-position:center center;}
.I1 {           background-image:url(yourimage2.jpg);
                background-position:center center;}
.I2  {           background-image:url(yourimage3.jpg);
                background-repeat:no-repeat;
                background-position:center center;}
 .I3 {           background-image:url(yourimage4.jpg);
                background-position:center center;}
 .I4  {           background-image:url(yourimage5.jpg);
                background-repeat:no-repeat;
                background-position:center center;}
 .I5 {           background-image:url(yourimage6.jpg);
                background-position:center center;}          
===============
The script:
count=15;
 bdr=150;
big=0;
doingAll=false;
slideNo=0;
slideTarget=0;
function doLoop()
{
    el=document.getElementById('slidediv1');
    el.style.display='block';
    bdr-=10;
    el.style.borderWidth=bdr+'px';
    el.style.width=(el.offsetWidth-(bdr*2)+20)+'px';
    el.style.height=(el.offsetHeight-(bdr*2)+20)+'px';
    count--;
    if (count>0) 
    {
        ST = setTimeout('doLoop()',50);
    }
    else
    {
        if (doingAll) ST=setTimeout('negLoop()',2000);
    }
}
function negLoop()
{
    el=document.getElementById('slidediv1');
    bdr+=10;
    el.style.borderWidth=bdr+'px';
    el.style.width=(el.offsetWidth-(bdr*2)-20)+'px';
    el.style.height=(el.offsetHeight-(bdr*2)-20)+'px';
    count++;
    if (count<15) 
    {
        ST = setTimeout('negLoop()',50);
   }
   else
   {
        if (doingAll)  switchImage();
    }
}
function switchImage()
{
        big++;
        big=(big>5)? 0 : big;
        el.className='I'+big;
        doAll();
}
function doAll()
{
    doingAll=true; 
    doLoop();
}

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

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

Initial Title
Round Slide Show With an Iris

Initial Tags
image

Initial Language
JavaScript