JavaScript to achieve the title of the picture Carousel special effects _javascript Skills

Picture Carousel, in some shopping sites on the list, below a brief introduction to the realization of the picture carousel.

As shown in figure

CSS code:

 <style type= "Text/css" >
 
body{
  width:524px;
  Border:solid 1px #666;
  Margin-left:auto;
  Margin-right:auto
  }
 . bg{
    background-color: #E0E0E0;
    height:20px;
    Border-top:solid 1px #B4B4B4;
    }
  . number{
    font-size:14px;
    Font-weight:bold;
    Color: #FFF;
    Background-color: #9E2E07;
    Display:block;
    border:1px solid #FFF;
    width:18px;
    height:18px;
    Text-align:center;
    margin-left:10px;
    Cursor:pointer;
    Float:left
    }
  . numberover{
    color: #8C2806;
    font-size:14px;
    width:280px;
    Background-color: #FFF;
    Text-align:center;
    Float:left;
    Display:block;
    margin-left:10px
    }
. main{
  width:95%;
  Margin-left:auto;
  Margin-right:auto
  }
  . left_indent{
    padding-left:20px
    }
  . red{
    color: #F00;
    }
 </style>

HTML code:

 <div class= "Body" >
 <div class= "bg" >
 <div class= "number" id= "fig_1" onclick= "show (1);" >1</div>
 <div class= "number" id= "Fig_2" onclick= "show (2);" >2</div>
 <div class= "number" id= "Fig_3" onclick= "show (3);" >3</div>
 <div class= "number" id= "Fig_4" onclick= "show (4);" >4</div>
 
 </div>
 </div>

JS Code:

 <script type= "Text/javascript" >//JavaScript Document//define global variable var title=new Array (); Title[0]= "1. The first wave of the store to buy three crazy day!
"; Title[1]= "2. Ten-year shop 39/99/169 special session!
"; Title[2]= "3. The full 69 percent ceiling to enjoy when the value of the low price!
";

Title[3]= "4, the shop to offer a huge amount of books 69 percent caps";  var nowframe = 1;  First picture displayed var maxframe = 4;        Altogether five pictures function show (D1) {if (D1) {cleartimeout (Thetimer);////When the button is touched, clear the timer nowframe=d1; Set current display picture} for (Var i=1;i< (maxframe+1); i++) {if (i==nowframe) {document.getElementById ("rotator")  . src = "ad-0" +i+ ". jpg";    Displays the current picture document.getElementById ("Fig_" +i). Innerhtml=title[i-1];  Displays the title document.getElementById ("Fig_" +i) for the current picture. Classname= "Numberover";
     Sets the CSS style for the current title} else{document.getElementById ("Fig_" +i). Innerhtml=i;
     document.getElementById ("Fig_" +i). Classname= "Number";
    } if (nowframe = = Maxframe) {//Set next displayed picture Nowframe = 1;
    } else{nowframe++;  } var thetimer=setinterval (' Show () ', 3000); Set timer, show next picture WIndow.onload=show; Run function when page loads show () </script>

The above mentioned is the entire content which this article shares, hoped everybody can like.