Advanced Search

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