Posted By

COBOLdinosaur on 02/15/13

Tagged

image csshtmlslide showround

Versions (?)

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.

Highlighted TextExpand

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();
}

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Round Slide Show With an Iris

Related snippets

Choose a language for easy browsing: