Hari ini saya melihat gambar geser yang ditulis oleh orang lain. Itu terlihat keren. Saat membaca kode sumber, itu tampak agak sulit. Jadi saya meniru dan menulis satu. Efeknya sama dengan halaman web asli, tetapi kode JS saya sendiri sederhana dalam logika dan perlu ditingkatkan.
PS: Saya menulis korsel dua hari yang lalu, dan kompatibilitas itu tidak baik. Ketika saya menulis halaman web ini hari ini, saya juga mengikuti ide ini dan berlari dengan sangat baik di Google Chrome. Banyak fungsi Firefox tidak dapat diimplementasikan. Karena Wrap-Panel menggunakan penentuan posisi absolut, terjemahan terjemahan diubah menjadi kiri. Setelah perubahan, setiap browser bekerja dengan baik.
Kode spesifiknya adalah sebagai berikut
Kode HTML (tidak ada komentar yang ditulis)
<dv> <h1> Parallax Slider </h1> <div> <div> <div id = "bg_1" style = "Left: 0px;"> </div> <div id = "bg_2" style = "Left: 0px;"> </Div> <v ID = "bg_2" style = "Left: 0px;"> </Div> <Div ID = "bg_2" style = "Left: 0px;"> </Div> <v ID = "bg_2" style = "Left: 0px;"> style = "Left: 0px;"> <div> <img id = "img_1" src = "gambar/1.jpg"> </div> <viv> <img src = "gambar/2.jpg"> </Div> <ver src = "gambar/3.jpg"> </div> <div> <img src = "gambar/3.jpg"> </Div> <v> <img src = "gambar/3.jpg"> </Div> <div> <img src = " 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 = "gambar/thumbs/1.jpg"> </li> <li> <img src = "gambar/jempol/2.jpg"> </li> <li> <img src = "gambar/thumbs/3.jpg"> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> src = "gambar/thumbs/4.jpg"> </li> <li> <img src = "gambar/thumbs/5.jpg"> </li> <li> <img src = "gambar/thumbs/6.jpg"> </li> </ul> </Div> </Div> </Div>
Kode CSS (Baca sendiri):
* {margin: 0; Padding: 0; } html, body, .container {width: 100%; Tinggi: 100%; Font-Family: 'Microsoft Yahei'; } .container {latar belakang-warna: #222; overflow-x: tersembunyi; } .container h1 {font-size: 50px; Warna: #CCC; Teks-Align: tengah; Font-Weight: Bolder; Tinggi: 120px; Line-Height: 120px; } .wrap {position: relatif; Lebar: 600%; Tinggi: 400px; Border-Top: 10px Solid #333; Border-Bottom: 10px Solid #333; margin-top: 20px; } .bg {position: absolute; Lebar: 100%; Tinggi: 100%; Kiri: 0; TOP: 0; -webkit-transisi: semua 1s; -Moz-transisi: semua 1s; -Ms-transisi: semua 1s; -o-transisi: semua 1s;--transisi: semua 1s; Transisi: Semua 1s; } .bg-1 {latar belakang: url (gambar/bg1.png); } .bg-2 {latar belakang: url (gambar/bg2.png); } .bg-3 {latar belakang: url (gambar/bg3.png); } .wrap-panel {position: absolute; Lebar: 100%; Tinggi: 100%; -webkit-transisi: semua 1s; -Moz-transisi: semua 1s; -MS-transisi: semua 1s; --transisi: semua 1s; Transisi: Semua 1s; } .panel {lebar: 16.66%; Tinggi: 100%; float: kiri; } .panel img {display: block; margin: 0 otomatis; margin-top: 35px; Border-Radius: 10px; Perbatasan: 10px RGBA padat (143, 143, 143, 0,6); } .navigasi-tombol rentang: hover {opacity: 0.8} .perv-button, .next-button {position: absolute; Lebar: 30px; Tinggi: 60px; latar belakang-warna: #344133; Border-Radius: 10px; kursor: pointer; Opacity: 0.4; } .perv-tombol {latar belakang: #000 url (gambar/prev.png) pusat no-repeat; } .next-tombol {latar belakang: #000 url (gambar/next.png) pusat pusat pusat tanpa-repeat; } .show-small {position: absolute; Lebar: 680px; Bawah: 20px; } .show-small ul {List-style: none; } .show-small ul li {float: left; margin: 0 10px; Perbatasan: 5px solid #fff; Opacity: 0.7; kursor: pointer; -webkit-transisi: semua .3s; -Moz-transisi: semua .3s; -MS-transisi: semua .3s; --transisi: semua .3s; Transisi: semua .3s; } .show-small ul li: hover {margin-top: -15px; }Kode JS (demo kecil):
window.onload = function () {// Dapatkan elemen var getDom = function (id) {return typeof id === "string"? document.geteLementById (id): id; } // Dapatkan objek var img = getDom ('img_1'); var prev = getdom ("rev_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 untuk elemen var addEvent = function (id, event, fn) {var el = getDom (id) || dokumen; if (el.addeventListener) {el.addeventListener (event, fn, false); } else if (el.attachevent) {el.attachevent ('on' + event, fn); }} function init () {// Posisikan tombol // jarak kiri tombol maju = jarak kiri gambar + perbatasan prev.style.left = img.offsetleft + 10 + 'px'; // Jarak atas tombol maju = jarak atas gambar + setengah dari tinggi gambar - setengah dari tombol 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; // Posisikan wadah gambar kecil wwidth = document.documentelement.clientwidth || document.body.clientwidth; show_small.style.left = (wwidth - show_small.clientwidth)/2 + 'px'; } // Fungsi pemrosesan gambar kecil small_img () {// Putar gambar untuk (var i = 0; i <list.length; i ++) {// rotate direction = math.pow (-1, parseint (math.random ()*10)); Daftar [i] .style = "Transform: rotate (" + (math.random ()*20*arah) + "deg)"; } daftar [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; } // Saat browser diperbesar, window.onresize = function () {init (); } // Jalankan fungsi 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'; ParseInt (-(Oldpos/WWIDTH + 1))*100) + 'PX'; 1)*500) + 'px'; AddEvent (Next, 'Click', function () {// Ubah var kiri Oldpos dari wrap-panel oldpos = parseInt (wrap_panel.style.left); if (oldpos == -wwidth*(list.length-1)) {// latar belakang wadah gambar panci wadah gambar panci panci gambar panci gambar latar belakang panci gambar latar belakang latar belakang panci gambar bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left = '0px'; bg_1.style.left = (oldpos - wwidth + parseint ( - (oldpos/wwidth + 1))*100) + 'px'; + parseInt (-(oldpos/wwidth + 1))*500) + 'px'; }Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.