_javascript technique of image sliding effect based on javascript

Today I saw others write the picture slide, looks very cool, read the source code, it seems that some difficulties, imitate to write a, the effect of the same as the original page, but their own JS code, logic simple, to be improved.
PS: The previous two days to write a merry-go-round, that compatibility is not good, write this page today, is also in accordance with this idea, in Google browser running very well, Firefox many functions can not be achieved, because wrap--panel use the absolute positioning, the translate translation changed to left. After the changes, the browser works well.

The specific code is as follows

HTML code (no comment written)

<div class= "Container" >  

CSS Code (see for yourself):

* {margin:0; padding:0;} 
  HTML, body,. container {width:100%; height:100% font-family: ' Microsoft Yahei ';} 
  . container {background-color: #222; overflow-x: Hidden;} . container h1 {font-size:50px; color: #ccc; text-align:center; font-weight:bolder; height:120px; line-height:120px; }. Wrap {position:relative; width:600% height:400px; border-top:10px solid #333; border-bottom:10px solid #333; margin-top:20px;  }. bg {position:absolute; width:100%; height:100%; left:0; top:0;-webkit-transition:all 1s;-moz-transition:all 1s;-ms-transition:all 1s;-o-transition:all 1s;transition:all 1s; 
  }. bg-1 {Background:url (images/bg1.png);} 
  . bg-2 {Background:url (images/bg2.png);} 
  . bg-3 {Background:url (images/bg3.png);} . wrap-panel {position:absolute; width:100% height:100%;-webkit-transition:all 1s;-moz-transition:all 1s;-ms-tran Sition:all 1s; -o-transition:all 1s; Transition:all 1s; }. Panel {width:16.66%; height:100%; Float:left;  Panel img {display:block; margin:0 auto; margin-top:35px border-radius:10px; border:10px solid Rgba (143, 143, 143, 0.6); }. Navigation-button Span:hover {opacity:0.8}. Perv-button,. Next-button {position:absolute; width:30px t:60px; Background-color: #344133; border-radius:10px; Cursor:pointer; opacity:0.4; 
  }. Perv-button {background: #000 URL (images/prev.png) center center No-repeat;} 
  . Next-button {background: #000 URL (images/next.png) center center No-repeat;} 
  . show-small {position:absolute; width:680px; bottom:20px;} 
  . show-small ul {list-style:none;}  . Show-small ul li {float:left; margin:0 10px; border:5px solid #fff; opacity:0.7; Cursor:pointer;-webkit-transition: All. 3s; -moz-transition:all 3s; -ms-transition:all. 3s;-o-transition:all 3s; Transition:all 3s; 
 }. Show-small ul li:hover {margin-top: -15px;}

JS Code (Small demo):

Window.onload = function () {//get element var getdom = function (ID) {return typeof id=== "string"? Docum 
      Ent.getelementbyid (ID): ID; 
      //Get Object var img = getdom (' img_1 '); 
      var prev = getdom ("perv_btn"); 
      var next = getdom ("next_btn"); 
      var wrap_panel = getdom (' Wrap_panel '); 
      var bg_1 = getdom ("bg_1"); 
      var bg_2 = getdom ("bg_2"); 
      var bg_3 = getdom ("Bg_3"); 
      var show_small = getdom ("Show_small"); 
      var list = show_small.getelementsbytagname ("Li"); 
 
       var wwidth; 
       Element Binding event var addevent = function (ID,EVENT,FN) {var el = getdom (id) | | document; 
       if (El.addeventlistener) {El.addeventlistener (event,fn,false); 
       }else if (el.attachevent) {el.attachevent (' on ' + EVENT,FN);  } function init () {//To position the button to the left of the forward button = Picture's left distance + border Prev.style.left 
        = Img.offsetleft + + ' px '; Top distance of forward button= The top distance of the picture + the half of the picture height-half of the button height Prev.style.top = img.offsettop + IMG.CLIENTHEIGHT/2-prev.clientheight/2 + ' px '; 
        Next.style.left = img.offsetleft + img.clientwidth + 10-next.clientwidth + ' px '; 
 
        Next.style.top =prev.style.top; Position the container for the small picture wwidth = Document.documentElement.clientWidth | | 
        Document.body.clientWidth; 
      Show_small.style.left = (wwidth-show_small.clientwidth)/2 + ' px ';  
          //Small picture processing function small_img () {//rotate the picture for (var i = 0;i< list.length; i++) { 
          Rotation direction var direction = Math.pow ( -1,parseint (Math.random () *10)); 
        List[i].style = "Transform:rotate (" + (Math.random () *20*direction) + "deg"); 
      } list[0].style.opacity = 1; function Only_one (el,num) {for (var i = 0; i < el.length; i++) {el[i].style.opacity = 
        0.7; 
        }//Console.log (num); 
el[num].style.opacity = 1;      }//Browser Scaling window.onresize = function () {init (); 
      }//Execute function init (); 
      Small_img (); 
         
        Addevent (prev, ' click ', function () {///change left var oldpos of Wrap-panel = parseint (wrap_panel.style.left); if (Oldpos = 0) {//Background translation picture container translation Bg_1.style.left=bg_2.style.left=bg_3.style.le 
 
          Ft=wrap_panel.style.left =-wwidth* (list.length-1) + ' px '; 
        Change the corresponding small picture transparency Only_one (list,list.length-1); 
          else {//Background translation picture container translation Wrap_panel.style.left = (Oldpos + wwidth) + ' px '; 
          bg_1.style.left= (Oldpos + wwidth-parseint (-(oldpos/wwidth + 1)) *100) + ' px '; 
          bg_2.style.left= (Oldpos + wwidth-parseint (-(oldpos/wwidth + 1)) *300) + ' px '; 
 
          bg_3.style.left= (Oldpos + wwidth-parseint (-(oldpos/wwidth + 1)) *500) + ' px '; 
        Change the corresponding small picture Transparency Only_one (List,parseint (oldpos/wwidth + 1)); 
    }  });         
 
        Addevent (Next, ' click ', function () {///change Wrap-panel left var oldpos = parseint (wrap_panel.style.left); if (Oldpos = =-wwidth* (list.length-1)) {//Background translation picture container translation Bg_1.style.left=bg_2.s 
 
          Tyle.left=bg_3.style.left=wrap_panel.style.left = ' 0px '; 
        Change the corresponding small picture transparency Only_one (list,0); 
          else {//Background translation picture container translation Wrap_panel.style.left = (oldpos-wwidth) + ' px '; 
          bg_1.style.left= (Oldpos-wwidth + parseint (-(oldpos/wwidth + 1)) *100) + ' px '; 
          bg_2.style.left= (Oldpos-wwidth + parseint (-(oldpos/wwidth + 1)) *300) + ' px '; 
 
          bg_3.style.left= (Oldpos-wwidth + parseint (-(oldpos/wwidth + 1)) *500) + ' px '; 
        Change the corresponding small picture Transparency Only_one (List,parseint (-(oldpos/wwidth-1))); 
    } 
      });
 }

The above is the entire content of this article, I hope to learn JavaScript program to help you.