习题1：切换图片

< html >

< head >

   < meta  charset= "UTF-8" >

   < title >标题 </ title >

   < style >

     * {

       margin:  0;

       padding:  0;

    }

     li {

       list-style:  none;

    }

     .box {

       width:  400px;

       height:  200px;

       position:  relative;

    }

     .box .add {

       position:  absolute;

       top:  0;

       left:  0;

       display:  none;

    }

     .box .ft {

       display:  block;

    }

     img {

       width:  100%;

       height:  100%;

    }

     .button .left {

       position:  absolute;

       top:  50%;

       left:  0;

       display:  inline-block;

       color:  red;

       width:  40px;

       height:  40px;

       line-height:  40px;

       background-color:  #ffffff;

       opacity:  0.4;

       z-index:  999;

       text-align:  center;

       margin-top:  -20px;

    }

     .button .right {

       position:  absolute;

       top:  50%;

       right:  0;

       display:  inline-block;

       color:  red;

       width:  40px;

       height:  40px;

       line-height:  40px;

       background-color:  #ffffff;

       opacity:  0.4;

       z-index:  999;

       text-align:  center;

       margin-top:  -20px;

    }

   </ style >

</ head >

< body >

   < div  class= "box" >

     < ul  class= "Img" >

       < li  class= "add ft" >

         < img  src= "./img/box1.jpg" >

       </ li >

       < li  class= "add" >

         < img  src= "./img/box2.jpg" >

       </ li >

       < li  class= "add" >

         < img  src= "./img/box3.jpg" >

       </ li >

     </ ul >

     < div  class= "button" >

       < div  class= "left"  onclick= "leftt()" >

        SD  </ div >

       < div  class= "right"  onclick= "rightt()" >

        FD

       </ div >

     </ div >

   </ div >

   < script >

                                   var  Add =  document. getElementsByTagName( 'li');

                                   var  Index =  0;

                                   function  leftt() {

                                     Index++;

                                     for ( var  i =  0;  i <  Add. length;  i++) {

                                       Add[ i]. className =  "add";

                                    }

                                     if ( Index >=  Add. length) {

                                       Index =  0;

                                    }

                                     Add[ Index]. className =  " ft";

                                  };

                                   function  rightt() {

                                     Index--;

                                     if ( Index <  0) {

                                       Index =  Add. length -  1;

                                    }

                                     for ( var  i =  0;  i <  Add. length;  i++) {

                                       Add[ i]. className =  "add";

                                    }

                                     Add[ Index]. className =  ' ft';

                                  }

   </ script >

</ body >

</ html >