Today I saw the sliding image written by someone else. It looked cool. When reading the source code, it seemed a bit difficult. So I imitated and wrote one. The effect was the same as the original web page, but my own js code is simple in logic and needs to be improved.
ps: I wrote a carousel two days ago, and that compatibility is not good. When I wrote this web page today, I also followed this idea and ran very well on Google Chrome. Many functions of Firefox cannot be implemented. Because wrap-panel uses absolute positioning, the translate translation is changed to left. After the changes, each browser works well.
The specific code is as follows
html code (no comments written)
<div> <h1>Parallax Slider</h1> <div> <div> <div id="bg_1" style="left: 0px;"></div> <div id="bg_2" style="left: 0px;"></div> <div id="bg_2" style="left: 0px;"></div> <div> <div> <img id="wrap_panel" style="left: 0px;"> <div> <img id="img_1" src="images/1.jpg"> </div> <div> <img src="images/2.jpg"> </div> <div> <img src="images/3.jpg"> </div> <div> <img src="images/4.jpg"> </div> <div> <img src="images/5.jpg"> </div> <div> <img src="images/6.jpg"> </div> </div> <div> <span id="perv_btn"></span> <span id="next_btn"></span> </div> <div> <div> <span id="next_btn"></span> </div> <div> <spatial id="show_small"> <ul> <li><img src="images/thumbs/1.jpg"></li> <li><img src="images/thumbs/2.jpg"></li> <li><img src="images/thumbs/3.jpg"></li> <li><img src="images/thumbs/4.jpg"></li> <li><img src="images/thumbs/5.jpg"></li> <li><img src="images/thumbs/6.jpg"></li> </ul> </div> </div> </div> </div> </div> </div>
CSS code (read it 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;-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 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 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 for element 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() { // Position the button // The left distance of the forward button = the left distance of the picture + border prev.style.left = img.offsetLeft + 10 + 'px'; // The upper distance of the forward button = the upper distance of the picture + half of the image height - half of the button 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 of small pictures 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++) { // Rotate 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; } // When the browser is zoomed, window.onresize = function() { init(); } // Execute the function init(); small_img(); addEvent(prev,'click',function() { // Change the left var oldPos of wrap-panel oldPos = parseInt(wrap_panel.style.left); if(oldPos == 0) { // Background pan picture container pan bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = -wwidth*(list.length-1) +'px'; // Change the corresponding small picture transparency only_one(list,list.length-1); } else { // Background pan picture container pan 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 image transparency only_one(list,parseInt(-(oldPos/wwidth + 1))); } }); addEvent(next,'click',function() { // Change the left var oldPos of wrap-panel oldPos = parseInt(wrap_panel.style.left); if(oldPos == -wwidth*(list.length-1)) { // Background pan picture container pan bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = '0px'; // Change the transparency of the corresponding small picture only_one(list,0); } else { // Background pan picture container pan 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 image transparency only_one(list,parseInt(-(oldPos/wwidth - 1))); } }); }The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.