Image Slide Based on javascript and javascript

Image Slide Based on javascript and javascript

Today, I watched the slides written by others, and it looks cool. When I read the source code, it seems a little difficult. I just copied and wrote one, achieving the same effect as the original webpage, however, the js code is simple in 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)

<div class="container">     
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.