Saya telah berbagi algoritma grafik korsel yang mengubah hierarki sebelumnya. Hari ini, saya terus menggunakan transparansi untuk mencapai algoritma grafik carousel bebas perpindahan.
Logika Implementasi: Posisikan semua gambar yang akan dikorsel bersama, yaitu, menumpuk mereka ke atas lapisan demi lapis, dan menggunakan atribut hierarkis untuk menyesuaikan urutan gambar yang benar, mengatur transparansi gambar ke 0, dan kemudian membuat transparansi gambar awal awal ke 1. Algoritma spesifik adalah sebagai berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Ubah algoritma transparansi (klasik) </iteme> <style media = "screen"> * {margin: 0; Padding: 0; } .wrap {width: 60%; margin: otomatis; Posisi: kerabat; } .wrap img {width: 100%; Posisi: Absolute; Kiri: 0; TOP: 0; Transisi: 2s; } .wrap img: nth-child (1) {position: relatif; } .wrap .follow {width: 150px; Tinggi: 30px; margin: otomatis; Tampilan: Flex; Konten Justify: Space-Between; } .wrap .follow span {width: 10px; Tinggi: 10px; Border-Radius: 50%; Border: 3px Solid Grey; } .wrap .follow span: hover {kursor: pointer; } </style> </head> <body> <div> <img src = "img/01.jpg"/> <img src = "img/02.jpg"/> <img src = "iMg/03.jpg"/> <img src = "img/04.jpg"/> <"input =" iMg = "iMg/04.jpg"/"/> <" input = "input =" IMG/IMG/04. JPG "/> <" input = "input =" iMG = "IMG/04. JPG"/> <"" " value="◀︎"> <input id="rightBut" type="button" name="name" value="▶︎"> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> <script type="text/javascript"> // Get the required element var images = document.queryselectorall ('. Wrap img'); var spans = document.queryselectorall ('. ikuti rentang'); var leftbut = document.geteLementById ('leftbut'); var rightbut = document.getElementById ('rightbut'); // Tentukan fungsi parameter showImage (index) {for (var i = 0; i <gambar.length; i ++) {spans [i] .index = i; // atribut khusus, dapatkan gambar subskrip yang sesuai [i] .index = i; // atribut kustom, dapatkan gambar yang sesuai [i] .style.zindex = i; '0'; // Tetapkan semua transparansi gambar ke 0 rentang [i] .style.background = 'abu -abu'; // Semua titik warna beijing diatur ke hitam} // Tetapkan transparansi gambar dari nilai subskrip parameter yang masuk ke 1 gambar [indeks] .style.opacity = '1'; // Tetapkan warna latar belakang gambar dengan nilai subskrip parameter yang masuk ke rentang putih [indeks] .style.background = 'putih'; } showImage (0); // Awalnya mengatur gaya gambar dengan nilai subskrip parameter yang masuk ke 0 var count = 1; // dapatkan penghitung // tentukan fungsi carousel otomatis imageMove () {// jika nilai jumlah dapat dibagi dengan 4, maka pasang kembali jumlah ke 0; if (count % 4 == 0) {count = 0; } // Lewati nilai hitungan sebagai parameter ke fungsi showImage (); showImage (Count); Count ++; // Jalankan sekali +1} // Atur fungsi ImageMove () untuk menelepon sekali setiap dua detik dan menetapkannya ke ImageInitialMove var ImageInitialMove = setInterval ('ImageMove ()', 2000); // klik kiri ke acara leftbut.onClick = function () {// hapus timer clearInterval (ImageInitialMove); // Karena arahnya berlawanan dengan roda otomatis, perlu untuk menilai bahwa nilai jumlah adalah 0, menugaskannya kembali ke 4, dan terus mengulang jika (hitung == 0) {count = 4; } count-; showImage (count); // Memanggil fungsi menghitung terlebih dahulu dari -imageInitialMove = setInterval ('ImageMove ()', 2000); } // The right-to-rightbut.onClick = function () {clearInterval (ImageInitialMove); Imagemove (); // karena arahnya sama dengan carousel otomatis, hubungi langsung // Tetap ulang timer ImageInitialMove = setInterval ('ImageMove ()', 2000); } // Klik acara untuk titik -titik untuk (var i = 0; i <spans.length; i ++) {spans [i] .onClick = function () {clearInterval (ImageInitialMove); // Tetapkan nilai subskrip dari dot yang saat ini diklik untuk menghitung count = event.target.index; // Panggil fungsi showImage (Count); ImageInitialMove = setInterval ('ImageMove ()', 2000); }} </script> </html>Berbagi topik yang indah: gambar jQuery carousel javascript gambar carousel bootstrap carousel
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.