Javascript-based image slide effect _ javascript tips-js tutorial

This article mainly gives you detailed information on how to achieve image Slide Based on javascript, which has some reference value. If you are interested, you can refer to the slides written by others today, it looks cool. When I read the source code, it seems a little difficult. I just copied it and wrote it to achieve the same effect as the original webpage. However, my js Code has simple logic and needs to be improved.
Ps: I wrote a carousel Trojan Two days ago. The compatibility is poor. When I write this webpage today, I also follow this idea and run well on Google's browser. Firefox has many functions that cannot be implemented, since wrap-panel uses absolute positioning, the translate translation is changed to left. After the changes, various browsers run well.

The Code is as follows:

Html code(No comments)

     Parallax Slider     
       
         
         
         
       
       
         
                    
         
                    
         
                    
         
                    
         
                    
         
                    
       
       
                         
       
         
 
 
           
  
  
           
  
  
           
  
  
           
  
  
           
  
  
           
  
  
         
 
 
       
     
   
 

Css code(View it on your own ):

* { 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-transition: 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; height: 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(Demo ):

Window. onload = function () {// get the element var getDOM = function (id) {return typeof id = "string "? Document. getElementById (id): id;} // get the 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; // bind 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 () {// locate the button. // The left distance of the forward button = the left distance of the image + the prev border. style. left = img. offsetLeft + 10 + 'px '; // The top distance of the forward button = the top distance of the image + half of the Image 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; // locate the container of the small image wwidth = document.doc umentElement. clientWidth | document. body. clientWidth; show_small.style.left = (wwidth-show_small.clientWidth)/2 + 'px ';} // processing function of the small image small_img () {// rotate the image 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;} // window when the browser scales. onresize = function () {init () ;}// execute the init () function; small_img (); addEvent (prev, 'click', function () {// change left var oldPos = parseInt (wrap_panel.style.left) of the wrap-panel; if (oldPos = 0) {// container translation bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left =-wwidth * (list. length-1) + 'px '; // change the transparency of the corresponding small image only_one (list, list. length-1);} else {// background translation image 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 transparency of the corresponding small image only_one (list, parseInt (-(oldPos/wwidth + 1) ;}}); addEvent (next, 'click', function () {// change left var oldPos = parseInt (wrap_panel.style.left) of the wrap-panel; if (oldPos =-wwidth * (list. length-1) {// The background translation image container translates bg_1.style.left = bg_2.style.left = bg_3.style.left = margin = '0px '; // change the transparency of the corresponding small image only_one (list, 0 );} else {// background translation image 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 transparency of the corresponding small image only_one (list, parseInt (-(oldPos/wwidth-1 )));}});}

The above is all the content of this article, and I hope it will help you learn javascript programming.