Plugin! Plugin! Saya mendengar orang-orang meminta plug-in ini dan plug-in itu setiap hari. Tentu saja, menggunakan plug-in pihak ketiga dapat sangat meningkatkan efisiensi pengembangan, tetapi sebagai pemula, saya masih suka menerapkannya sendiri, terutama karena saya punya waktu!
Hari ini saya akan berbagi dengan Anda cara menulis gambar korsel menggunakan js asli
Senior dapat mengabaikan omong kosong berikut:
Sebelum memulai, izinkan saya berbicara tentang pengalaman saya belajar front-end hingga sekarang. Seharusnya sekitar dua bulan hari ini. Pada dasarnya membutuhkan waktu 6-10 jam belajar setiap hari, murni belajar sendiri, dan dikatakan bahwa pelatihan tidak dapat diandalkan! Saat ini saya hanya belajar tiga item utama (HTML5, CSS3, JavaScript), dan semua pengetahuan lainnya masih peringkat di balik rencana pembelajaran ... Saya dalam periode kebingungan, dan saya tidak tahu harus dipelajari apa yang harus saya pelajari terlebih dahulu! Apa pun yang terjadi, mari kita selesaikan tiga item utama terlebih dahulu. Jika Anda memiliki saran yang bagus, saya harap Anda dapat memberi saya beberapa saran!
Dari HTML5 ke CSS3, saya merasa bahwa front-end cukup sederhana, jadi saya merasa sedikit percaya diri dan termotivasi. Lalu saya belajar JS. Saya dulu belajar C# dan Apple's Swift. Keduanya adalah bahasa yang berorientasi objek dan kuat, yang relatif maju. Namun, saya masih suka front-end, jadi saya berbalik ke sini dan mulai belajar JS. Itu mudah, tetapi saya merasa bahwa bahasa ini agak berantakan dan berbeda dari yang lain! Ada beberapa hal yang tidak mudah dimengerti dalam panduan otoritatif. Jika Anda tidak dapat melakukannya, lihat saja lebih banyak di Baidu dan lihat lebih banyak pemahaman orang lain tentang konsep -konsep seperti penutupan dan prototipe, dan secara bertahap Anda dapat menguasainya. Pada tahap ini, Anda mungkin secara bertahap menyadari bahwa front-end mencakup banyak hal! Ada banyak perpustakaan pihak ketiga, kerangka kerja, dll., Dan banyak hal lainnya. Singkatnya, kata benda baru terus bermunculan di depan mata Anda. Ada yang mengatakan bahwa ini akan sudah ketinggalan zaman dan itu akan menjadi arus utama, yang sangat kacau! Sangat berantakan! Bagaimana saya harus pergi selanjutnya? Apa yang harus dipelajari dulu? Apa yang harus dipelajari nanti?
Saya saat ini pada tahap ini. Terkadang saya tidak tahan menonton apa pun selama dua hari berturut -turut, tidak bisa tidur, dan merasa kesal, yaitu, saya terobsesi dengan itu!
Saya hanya berpikir, ada apa dengan saya? Saya tidak bisa mengetahuinya! Lupakan, istirahatlah dan berolahraga tubuh Anda! Cukup berlari dan berkeliaran! Sambil berpikir: bagaimana membuat diri Anda kembali ke negara bagian!
Kemudian saya melakukan ini: Beri diri Anda permen! (Buat beberapa contoh sederhana sendiri)
Saya menemukan bahwa permen itu sangat manis sehingga saya benar -benar bisa membuatnya! Rasa pencapaiannya santai dan motivasinya penuh! Saya baru saja menulis satu contoh demi satu. Jika saya tidak mengerti atau tidak terbiasa dengan API, saya akan menerjemahkan dokumen (saya akan menulisnya sendiri sebelum membaca kode orang lain, dan saya akan membacanya lagi jika saya benar -benar tidak bisa). Perlahan -lahan, saya merasa bahwa saya benar -benar kembali dan mulai ke jalur yang benar!
Saya juga melihat orang-orang seperti apa yang dibutuhkan sebagian besar perusahaan yang saat ini merekrut perusahaan front-end, dan kemudian membuat rencana studi baru untuk diri saya sendiri. Tentu saja, karena saya punya waktu sekarang, saya ingin meluangkan waktu untuk mengkonsolidasikan tiga yayasan utama terlebih dahulu, berlatih lebih banyak, dan kemudian kembali dan membaca dokumen lagi untuk memahami prinsip -prinsip dasar dan internal mereka! Tidak peduli apa yang Anda pelajari selanjutnya, akan jauh lebih mudah untuk memulai! Pada saat yang sama, terus pahami lebih banyak front-end! Untuk memahami prospek dan arah profesi ini adalah dengan membangun pandangan dunia front-end untuk diri Anda sendiri, sehingga Anda tidak akan kehilangan arah saat Anda belajar!
Adapun perpustakaan dan kerangka kerja pihak ketiga yang harus dipelajari, saya tidak tahu saat ini. Apakah JQ sudah ketinggalan zaman? Apakah Anda perlu belajar? Saya tidak tahu, jadi saya tidak peduli lagi, hanya bermain dengan yang asli terlebih dahulu! Anda harus tahu secara alami di masa depan!
Pertempuran yang sebenarnya dimulai, berikut ini adalah kode dan demonstrasi.
Saya tidak dapat mempelajari metode penulisan yang berorientasi objek dari senior saya saat ini, jadi saya hanya bisa menulis beberapa fungsi, haha! (Gambar berasal dari internet. Anda juga dapat memotong sendiri gambar 300*200 untuk melihat efeknya. Klik tombol 'Grade and Out' untuk memulai)
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> </iteme> <tyle> *{margin: 0; Padding: 0; List-style: tidak ada; Dekorasi Teks: Tidak Ada; } #slide {position: absolute; Atas: 100px; Kiri: 50px; Lebar: 300px; Tinggi: 200px; Perbatasan: 1px Solid Grey; } #slide .blog-name {display: block; Posisi: Absolute; Bawah: 0; Kiri: 0; Lebar: 100%; Tinggi: 25px; Line-Height: 25px; Latar Belakang-Color: RGBA (155.155.155.0.5); z-index: 4; kursor: pointer; Text-Indent: 3px; } #slide-nav {position: absolute; Kanan: 5px; Bawah: 5px; z-index: 5; } #slide-nav li {display: inline-block; Lebar: 16px; Teks-Align: tengah; Line-Height: 16px; Border-Radius: 5px; kursor: pointer; meluap: tersembunyi; } #slide-nav li: hover, .seleksi {background-color: #336699; Warna: Putih; } .slide-content1 {position: absolute; Lebar: 300px; Tinggi: 200px; Ukuran font: 0; } .slide-content1 a {position: absolute; kursor: pointer; } .slide-content1 a: visited {color: black;} #model-btn {position: absolute; Atas: -25px; font-size: 20px; } </tyle> <script> window.onload = function () {var sufuimagescrooller = function () {// Beberapa fungsi fungsi alat acara (img) {var id; untuk (var i = 0; i <= 21; i ++) {var op = i * 5; id = setTimeOut (function (e) {setopacity (img, e)} .bind (ini, op), i * 50); } clearTimeout (id); } function hide (img) {var id; untuk (var i = 0; i <= 21; i ++) {var op = 100 - i * 5; id = setTimeout (function (e) {setOpacity (img, e)} .bind (ini, op), i * 20); } clearTimeout (id); } function getById (id) {return document.geteLementById (id); } fungsi setopacity (elem, level) {if (elem.filter) {elem.style.filter = "alpha (opacity =" + level + ")"; // kompatibel dengan IE} else {elem.style.opacity = level/100; }} // (Mode Lanjutan dan Progresif) Fungsi tubuh Inoutmodel (nums, navid, imgcontainerid, imginfoid, tunda) {// Cegah beberapa klik tombol pemilihan mode untuk membuat lebih banyak Li if (getById ('slide-nav'). ChildElementCount! == 0) {return} /create navigasi navigasi = navigasi = [] [] [] [] {return} /create navigasi navigasi = navigasi = [] [] ( var targetidext = 0; // Simpan informasi status gambar var currentIdext = 0; // Simpan informasi status gambar var frag = document.createdocumentfragment (); untuk (var i = 0; i <nums; i ++) {nav [i] = fragment.appendChild (document.createelement ('li')); // Metode AppendChild akan mengembalikan Li nav [i] .InnerHTML = i+1; } getById (navid) .AppendChild (frag); // inisialisasi untuk menampilkan gambar pertama var imgs = getById (imgcontainerid) .geteLementsbyTagname ('a'); var info = getById (imginfoid); info.innerhtml = imgs [0] .title.slice (0,12)+'...'; nav [0] .className = 'dipilih'; // Perubahan dinamis dari ClassName Li untuk mengubah gayanya untuk (var j = 1; j <nav.length; j ++) {setopacity (imgs [j], 0); } // Mulai Carousel Var ID otomatis; function start(delay){ id = setInterval(function(){ hide(imgs[cureentIdext]); nav[cureentIdext].className = ''; if(targetIdext<nums-1){ targetIdext ++; }else{ targetIdext = 0; } humentIdext = targetIdext; show(imgs[targetIdext]); nav[targetIdext].className = 'Dipilih'; } start (tunda); // Tambahkan acara untuk setiap tombol navigasi untuk (var k = 0; k <nav.length; k ++) {nav [k] .onClick = function (event) {var e = event || window.event; // kompatibel dengan IE var t = event.target || event.srcelement; // kompatibel dengan IE var Idex = parseInt (t.innerHtml) -1; console.log ('IDEX:'+IDEX+'T:'+TargetIdext+'C:'+CureentIdext); if (idex === humen [Cureentidext]); nav [CureENTIDEXT] .ClassName = ''; Humenidext = IDEX; Tampilkan (IMGS [IDEX]); nav [Idex] .className = 'dipilih'; info.innerHtml = imgs [Idex] .title.slice (0,12)+'...'; }} getById (navid) .onmouseOver = function () {clearInterval (id)}; getById (navid) .onmouseout = function () {start (delay)}; } // dari fungsi mode kanan ke kiri dariRightModel (nums, navid, imgcontainerid, imginfoid, delay) {alert ('Blogger malas, lupa menerapkan fungsi ini! Silakan tinggalkan pesan jika Anda membutuhkannya!'); } function fromtopModel (nums, navid, imgcontainerid, imginfoid, delay) {alert ('blogger malas, lupa untuk mengimplementasikan fungsi ini! Silakan tinggalkan pesan jika Anda membutuhkannya!'); } return {inoutmodel: inoutmodel, fromrightmodel: fromrightmodel, fromtopModel: fromtopModel: fromtopModel, getById: getById}} (); sufuimagescrooller.getById ('model-btn1'). onclick = function () {sufuimagescrooller.inoutmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; sufuimagescrooller.getById ('model-btn2'). onclick = function () {sufuimagescRooller.fromrightModel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; sufuimagescrooller.getById ('model-btn3'). onclick = function () {sufuimagescRooller.fromtopmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; }; </script> </head> <body> <Div id = "slide"> <a id = "slide-info" href = "http://www.cnblogs.com/susufu/" target = "_ blank"> Blog Sufu </a> <ul = "slide-nav"> </ul> </slide = " href = "http://www.cnblogs.com/susufufu/p/5749922.html" target = "_ blank"> <v> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=1247027539,1217965501&fM=21&gp=0.jpg"> </div> </a> href = "http://www.cnblogs.com/susufufu/p/5768431.html" target = "_ blank"> <Div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=4286855119,2694540617&fM=21&gp=0.jpg"> </div> </a> href = "http://www.cnblogs.com/susufufu/p/5738673.html" target = "_ blank"> <div> <img src = "https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=4042865154,1782505495&fM=21&gp=0.jpg"> </div> </a> href = "http://www.cnblogs.com/susufufu/p/5714020.html" target = "_ blank"> <v> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2603111195,1920098549&fm=21&gp=0.jpg"> </div> </a> href = "http://www.cnblogs.com/susufufu/p/5759480.html" target = "_ blank"> <Div> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=4104312586.1589909074&fM=21&gp=0.jpg"> </Div> </a> "" divp=0.jpg "> </Div> </a>" "" divp=0.jpg "> </Div>" " type = "tombol" id = "model-btn1" value = "Progressive bertahap"> <input type = "tombol" id = "model-btn2" value = "kanan ke kiri"> <input type = "tombol" id = "model-btn3" value = "atas ke bawah"> </div> </div> </body> </html>Pada awalnya, pikirkan cara mengimplementasikannya: bukankah Anda hanya menggunakan timer untuk mengubah gambar dan mengubah opacity gambar di cutstone?
1. Tata letak HTML relatif sederhana:
<ul id = "slide-nav"> </ul> <div id = "slide-main"> <a href = "" target = "_ blank"> <v> <img src = "lg1.png"> </div> </a> ... </div> ...
Slide-Info digunakan untuk menampilkan judul gambar. Slide-NAV adalah tombol digital, slide-main adalah wadah gambar, dan tautan gambar ditempatkan di dalamnya.
Tidak ada Li yang ditulis dalam tag karena dibuat secara dinamis melalui JS;
2. Selama Anda mengalami pengaturan gaya CSS, Anda akan memahaminya. Perhatikan mereka:
• Sebelum Anda membuat tata letak sendiri, yang terbaik adalah menambahkan perbatasan ke elemen induk, sehingga Anda dapat memahami adegan dan akhirnya menghapusnya.
• Ul li dan banyak tag lainnya memiliki bantalan secara default, dan semua harus diatur ke 0;
*{margin: 0; Padding: 0; List-style: tidak ada; Dekorasi Teks: Tidak Ada; }Tinggi: 25px; dan line-height: 25px; Dua sama, sehingga karakter dapat dipusatkan
Z-index hanya relatif terhadap saudara dan anak-anak Anda, dan tidak valid untuk kerabat di sela-sela. Jika Anda ingin ditampilkan di depan kerabat di sela -sela, siapkan leluhur kerabat di sela -sela. Misalnya, kakek Anda adalah perdana menteri dan tuan kedua Anda adalah seorang petani, maka semua identitas keluarga Anda lebih mulia daripada semua identitas keluarga master kedua Anda.
• Posisi: absolut; ini juga terkait dengan ayahnya. Jika ayahnya belum menetapkan posisi, itu tidak dapat diandalkan, jadi terus mencari dukungan sampai dia menemukannya, dan kemudian mengandalkan dia untuk memposisikannya!
• Jika Anda ingin mencapai efek dari kanan ke kiri, ingat ukuran font: 0; Jelaslah tentang jarak antar gambar dan simpan gambar -gambar itu bahu bahu!
Seperti kata pepatah, latihan menjadi sempurna. Hanya ketika CSS padat, Anda dapat mengontrol tata letak! Misalnya, tata letak sayap ganda berikut dapat dicapai tanpa posisi:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> </iteme> <tyle> body {margin: 0; Padding: 0; } .Header, .footer {width: 100%; Tinggi: 50px; Line-Height: 50px; Teks-Align: tengah; Latar Belakang: Greenyellow; } .container {overflow: tersembunyi; *Zoom: 1; } .left {float: left; Lebar: 100px; Tinggi: 100px; margin -kiri: -100%; Latar Belakang: Hijau; } .main {float: kiri; Lebar: 100%; Tinggi: 100px; Latar Belakang: Gray; } .right {float: kiri; Lebar: 200px; Tinggi: 100px; margin -kiri: -200px; Latar Belakang-Color: Emas; } .center {padding-left: 100px; Padding-Right: 200px; } </tyle> </head> <body> <div> header </div> <div> <div> pusat utama </div> </div> <div> Kiri </div> <div> kanan </div> </div> <v> footer </div> </bod> </html>Implementasi Kode
Tulis garis besar terlebih dahulu:
var sufuImageScrooller = function(){function getById(id){...} //Universal get element object function setOpacity(elem,level){...} //Set transparency function hide(img){...} //Fake in function show(omg){...} //Fake out function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ ... } // fungsi utama return body {inoutmodel: inoutmodel, ...}} ();Dengan cara ini, Anda dapat memanggil metode inoutmodel melalui Sufuimagescrooller, SufuimagescRooller. inoutmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500);
Inoutmodel (nums, navid, imgcontainerid, imginfoid, tunda) Parameter: NUMS menciptakan jumlah LI, yang harus sesuai dengan jumlah gambar, ID wadah tombol digital Navid, ID ID IMGContainererID, ID IMGINFOID IMGINFOUD ID Informasi Informasi Judul Gambar, Menunda menentukan waktu tunda untuk beralih gambar;
Setelah menulis garis besar, setengah selesai. Yang lain adalah implementasi detail spesifik. Saya tidak menulis dengan baik. Saya hanya bisa mengatakan bahwa saya telah menerapkan fungsi ini. Semua orang memikirkannya sendiri. Jika Anda memiliki saran yang bagus, jangan ragu untuk mengedepankannya;
Mulailah dengan memotong fungsi inoutmodel dan kemudian masuk lebih dalam langkah demi langkah. Kuncinya adalah mengetiknya secara manual. Jika Anda hanya melihatnya, Anda tidak akan memiliki pengalaman yang mendalam!
Oke, itu intinya. Jika Anda tidak tahu bagaimana menerjemahkan API dokumen sendiri, Anda juga dapat meninggalkan pesan untuk bertanya kepada saya
Artikel di atas "Perasaan mewujudkan efek korsel dari JS + asli mempelajari front-end (mencegah obsesi) 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.