Saya tidak dapat meningkatkan minat saya pada CSS baru -baru ini karena saya telah marah tentang korsel gambar dan belum belajar dengan baik, jadi saya meluangkan waktu untuk membiasakan diri dengan JS. Kemudian saya berjalan ke Black Road dan menulis efek carousel dan gambar memudar dalam menggunakan jQuery dan JS. Jalan menuju belajar di masa depan sangat panjang, saya harap saya akan melangkah lebih jauh dan lebih jauh di jalan depan `(∩_∩) ′
Pada prinsipnya, ada banyak tutorial online, sederhananya.
Memudar, tetapi pada kenyataannya, hanya efek pudar yang digunakan di sini. Untuk setiap gambar yang pudar, kami mengatur tampilannya untuk diblokir, dan yang lainnya tidak ada, jadi hanya ada satu gambar yang benar -benar ada dan menempati posisi dalam aliran dokumen. Sebelum mengatur metode tampilan gambar, secara bertahap meningkatkan transparansi gambar akan memberi orang perasaan memudar.
Bahkan, ada poin kunci lain dalam kode JS. Penutupan digunakan dalam kode, jadi saya memiliki sedikit pemahaman tentang penutupan. Izinkan saya mengucapkan beberapa kata lagi di sini:
Penjelasan resmi penutupan adalah bahwa penutupan adalah ekspresi (biasanya fungsi) yang memiliki banyak variabel dan lingkungan yang terikat pada variabel -variabel ini, sehingga variabel -variabel ini juga merupakan bagian dari ekspresi.
Cara paling sederhana adalah:
Ketika fungsi internal B fungsi A dirujuk oleh fungsi luar variabel A, penutupan dibuat.
Mengatakannya lebih teliti. Yang disebut "penutupan" adalah untuk mendefinisikan fungsi lain sebagai fungsi metode dalam badan konstruktor, dan fungsi metode dari objek ini pada gilirannya mengacu pada variabel sementara di badan fungsi luar. Hal ini memungkinkan nilai variabel sementara yang digunakan oleh badan konstruktor asli dipertahankan secara tidak langsung selama objek target selalu dapat mempertahankan metodenya selama masa hidupnya.
Meskipun panggilan konstruktor awal telah berakhir dan nama -nama variabel sementara telah menghilang, nilai variabel selalu dapat dirujuk dalam metode objek target, dan nilainya hanya dapat diakses dalam metode ini. Bahkan jika konstruktor yang sama dipanggil lagi, hanya objek dan metode baru yang akan dihasilkan. Variabel sementara baru hanya sesuai dengan nilai baru, dan tidak tergantung pada panggilan terakhir.
Fungsi berikut adalah fungsi penutupan. Mengapa menggunakan penutupan? Apakah tidak mungkin untuk fungsi biasa? Itu benar -benar tidak mungkin. Tujuan penutupan di sini adalah untuk tetap merujuk pada bendera. Jika tidak ada penutupan, untuk variabel lokal, selama fungsi dieksekusi sekali, yaitu, bendera dieksekusi sekali, variabel lokal akan dikumpulkan dan dibersihkan oleh mekanisme pengumpulan sampah. Kami merujuk ke variabel flag melalui fungsi dalam panggilan intermiten. Ketika eksekusi kedua dieksekusi, bendera akan kehilangan nilainya dan badan fungsi tidak dapat menjalankan hasil yang benar. Ketika saya mulai menyentuh ujung depan, saya merasa bahwa penutupan itu opsional. Faktanya, hal ini sangat penting!
var setVal = function (s, flag) {return function () {pos = math.abs (parseInt (pic.style [point])); if (flag> 0) {// Titik saat ini lebih besar dari koordinat titik target, gambar bergerak ke kanan, nilai kiri mengurangi pic.style [point] = -math.floor (pos +(parseInt (s*ssingLesiSize) - pos)*speed) +'px'; } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseInt (s*ssingLesiSe) - pos)*speed) +'px'; } if (pos == (sSingLesiSe * s)) {sekarang = s; ClearInterval (Interval); }}};Ini kodenya:
html
<! Doctype html> <html> <adap> <meta charset = "utf-8"/> <itement> picsglide </iteme> <tautan href = "css/index.css" rel = "stylesheet" type = "text/css"> <script type = "teks/javascript" srcric = "JUPT." src = "js/index.js"> </script> </head> <body onload = "init ()"> <div id = "picbox"> <ul class = "show_pic" style = "left: 0"> <li class = "on"> <a href = "#"> <mg src = "imgs/ccc.jpg" src = "imgs/aaa.jpg"/> </li> <li> <img src = "imgs/bbb.jpg"/> </li> <li> <img src = "imgs/ccc.jpg"/</> <li> <li> <iMg src = "ccc. src="imgs/ccc.jpg" /></li> </ul> <div class = "bg"></div> <ul class = "show_des"> <li>puss in boots1</li> <li>puss in boots2</li> <li>puss in boots3</li> <li>puss in boots4</li> <li>puss in boots5</li> </ul> <ul class = "icon_num"> <li class = "on"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div> </bod> </hli>
CSS
body {font-size: 12px; } ul, li {padding: 0; Margin: 0; List-style: tidak ada; } #picbox {width: 610px; Tinggi: 205px; Margin: 50px Auto; meluap: tersembunyi; Posisi: kerabat; font-size: 0;}/*gambar carousel*/#picbox .show_pic {width: 3050px; Posisi: absolute;}#picbox .show_pic li {float: left; Lebar: 610px; Tinggi: 205px; Tampilan: Tidak Ada; /*display: none;*/}#picbox .show_pic li.on {display: block;}#picbox .show_pic li img {display: block; Lebar: 610px; Tinggi: 205px;}#picbox .icon_num {position: absolute; Bawah: 12px; Kanan: 10px; z-index: 10;}#picbox .icon_num li {float: left; /*latar belakang: url (/uploadfile/200912/28/fa15567738.gif) no -rePeat -15px 0; */ Lebar: 16px; Tinggi: 16px; font-size: 16px; Warna: #39f; Teks-Align: tengah; kursor: pointer; margin-hak: 5px;} #picbox .icon_num li.on {latar belakang: #000; Opacity: 0,5; }/*latar belakang*/. Bg {z-index: 1; Posisi: Absolute; Bawah: 0; Tinggi: 40px; Lebar: 610px; Latar belakang: #000; Opacity: 0.6; filter: alpha (opacity = 60);}#picbox .show_des {width: 300px; Tinggi: 18px; Posisi: Absolute; Bawah: 11px; Kiri: 15px; Warna: #fff; z-index: 10;}#picbox .show_des li {display: none; Line-Height: 18px; ukuran font: 18px;}#picbox .show_des li.on {display: block;}JS
fungsi cleanwhitespace (oElement) {for (var i = 0; i <oelement.childnodes.length; i ++) {var node = oeelement.childnodes [i]; if (node.nodetype == 3 &&! // s/.test (node.nodevalue)) {node.parentnode.removechild (node); }}} // Kode carousing this.layerglide = function (auto, obox, ssinglesize, kedua, fspeed, point) {var interval, timeout; // dua timer var pos; // Nilai absolut dari koordinat penentuan posisi saat ini membentuk waktu var = kedua, sekarang = 0; // gambar waktu bergerak setelah interval waktu, sekarang nilai indeks dari gambar saat ini var kecepatan = fspeed // kecepatan gerakan var delay = kedua * 1000; // interval waktu untuk setiap switching gambar var picbox = document.geteLementById (OBOX); CleanWhitespace (picbox); var pic = picbox.childnodes [0]; // daftar gambar var des = picbox.childnodes [2] .geteLementsByTagname ("li"); // daftar gambar var con = picbox.childnodes [3] .geteLementsByTagname ("li"); var sum = con.length; var setVal = function (s, flag) {return function () {pos = math.abs (parseInt (pic.style [point])); if (flag> 0) {// Titik saat ini lebih besar dari koordinat titik target, gambar bergerak ke kanan, nilai kiri mengurangi pic.style [point] = -math.floor (pos +(parseInt (s*ssingLesiSize) - pos)*speed) +'px'; } if (flag <0) {pic.style [point] = -math.ceil (pos +(parseInt (s*ssingLesiSe) - pos)*speed) +'px'; } if (pos == (sSingLesiSe * s)) {sekarang = s; ClearInterval (Interval); }}}}; var changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .className = ""; des [i] .className = ""; }; con [num] .className = "on"; des [num] .className = "on"; var flag = math.abs (parseInt (pic.Style [point]))-ssinglesize * num; interval = setInterval (setVal (num, flag), waktu); //bkg.hide (). fadein (); } function autoglide () {clearTimeout (interval); sekarang = (sekarang == (parseInt (sum) -1))? 0: (sekarang + 1); Changeto (sekarang); timeout = setTimeout (autoglide, delay); } function isAuto () {if (auto) {timeout = setTimeOut (autoglide, delay); }; } isAuto (); // Mulai carousel otomatis untuk (var i = 0; i <sum; i ++) // tombol navigasi {con [i] .onmouseOver = (function (i) {return function () {clearTimeout (timeout); clearInterval (interval); changeto (i); this.onmouseout = isAuto ();} (i) (i) (this.onmouseout = isAuto ();}} (i); this.layerFader = fungsi (auto, obox, kedua, hitungan, kecepatan) {var interval, batas waktu; // dua timer var sekarang = 0; // gambar waktu bergerak setelah interval waktu, sekarang nilai indeks dari gambar saat ini var delay = kedua * 1000; // interval waktu setiap gambar diaktifkan var picbox = document.geteLementById (OBOX); CleanWhitespace (picbox); var pic = picbox.childnodes [0] .getElementsByTagname ("li"); var des = picbox.childnodes [2] .geteLementsByTagname ("li"); var con = picbox.childnodes [3] .getElementsByTagname ("li"); var sum = con.length; fungsi fadein (elem) {setopacity (elem, 0); // Awalnya sepenuhnya transparan untuk (var i = 0; i <= count; i ++) {// Transparansi Perubahan 20 * 5 = 100 (fungsi (i) {var level = i * 5; // Nilai perubahan transparansi setiap waktu setTimeout (function () {setopacity (elem, level)}, i * kecepatan);}) (i); }} fungsi setopacity (elem, level) {// atur transparansi if (elem.filters) {elem.style.filter = "alpha (opacity =" + level + ")"; } else {elem.style.opacity = level / 100; }} var changeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .className = ""; des [i] .className = ""; pic [i] .className = ""; }; fadein (pic [num]); con [num] .className = "on"; des [num] .className = "on"; pic [num] .className = "on"; //bkg.hide (). fadein (); } function autoglide () {clearTimeout (interval); sekarang = (sekarang == (parseInt (sum) -1))? 0: (sekarang + 1); Changeto (sekarang); timeout = setTimeout (autoglide, delay); } function isAuto () {if (auto) {timeout = setTimeOut (autoglide, delay); }; } isAuto (); // Mulai carousel otomatis untuk (var i = 0; i <sum; i ++) // tombol navigasi {con [i] .onmouseOver = (function (i) {return function () {clearTimeout (timeout); // clearInterval (interval); changeto (i); this.onmouseout = isAuto ();}} (i);JQuery jauh lebih sederhana dari JS, jadi saya tidak akan membahas detailnya di sini. Ketika saya berada di tahun pertama saya, saya mengikuti kelas pola desain. Guru memberi tahu kami untuk memprogram antarmuka daripada implementasi. Cobalah untuk tidak muncul konstanta dalam kode untuk meningkatkan penggunaan kembali kode. Oleh karena itu, saat menulis kode, semua faktor variabel disebutkan ke parameter. Dalam kalimat terakhir, untuk operasi JS Dom, JS adalah cara raja. Hanya dengan menggunakan dan berlatih lebih banyak yang bisa Anda kuasai dengan baik. Saya harap Anda akan melangkah lebih jauh dan lebih jauh di masa depan.
Contoh sederhana di atas dari JS asli yang mengimplementasikan carousel gambar dan efek fade-in adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.