hujung hadapan webtutorial jsJavascript melaksanakan kesan karusel imej (1) Buat kemahiran jump_javascript imej
Kesan karusel imej boleh dilihat pada halaman utama semua tapak web utama dan agak biasa. Editor di bawah akan berkongsi dengan anda pelaksanaan mudah kesan ini.
1. Gambar melonjak
2. Pelaksanaan kawalan jujukan gambar
3. Pelaksanaan kawalan butang hadapan dan belakang
Dalam artikel ini, mari lihat gambar bertukar mengikut selang waktu.
Mari lengkapkan kod struktur dahulu, dan saya tidak akan menerangkannya secara terperinci Biar saya tunjukkan pemaparan dahulu:
Kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,ol,li{
list-style: none;
margin: 0;
padding: 0;
}
#slider{
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#slider ul{
width: 2400px;
position: relative;
}
#slider ul:after{
content: " ";
width: 0;
height: 0;
display: block;
}
#slider ul li{
float: left;
width: 800px;
height: 300px;
overflow: hidden;
}
#slider ul li img{
width: 100%;
}
#slider ol{
position: absolute;
bottom: 10px;
left: 46%;
}
#slider ol li{
display: inline-block;
}
#slider ol li a{
display: inline-block;
padding:4px 8px;
border-radius:15px;
background-color: #000;
color: #fff;
}
#slider .prev, #slider .next{
display: inline-block;
position: absolute;
top: 49%;
background-color: #000;
opacity: 0.6;
color: #fff;
padding: 3px;
}
#slider .prev{
left: 10px;
}
#slider .next{
right: 10px;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li> <img src="/static/imghwm/default1.png" data-src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" class="lazy" / alt="Javascript melaksanakan kesan karusel imej (1) Buat kemahiran jump_javascript imej" > </li>
<li> <img src="/static/imghwm/default1.png" data-src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" class="lazy" / alt="Javascript melaksanakan kesan karusel imej (1) Buat kemahiran jump_javascript imej" > </li>
<li> <img src="/static/imghwm/default1.png" data-src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" class="lazy" / alt="Javascript melaksanakan kesan karusel imej (1) Buat kemahiran jump_javascript imej" > </li>
</ul>
<ol>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
</ol>
<a href="#">上一张</a>
<a href="#">下一张</a>
</div>
</body>
</html>
Baiklah, sekarang mari kita kawal lompatan imej melalui JS.
Mula-mula kita perlu mencari lokasi gambar di sini kita menggunakan ul untuk susun atur, jadi mula-mula kita perlu mencari nombor LI di bawah UL
Kemudian biarkan gambar dipaparkan satu persatu Kami menggunakan mod tetingkap, iaitu mod lapisan topeng adalah tingkap, ul ialah pemandangan di luar tingkap, dan pemandangan ul disusun secara melintang
Kemudian dipamerkan pemandangan luar seperti saiz tingkap iaitu setiap gambar digunakan sebagai pemandangan setiap tingkap Di sini, saiz gambar dikawal supaya sama saiznya dengan tingkap.
Di atas menerangkan konsep, iaitu pemprosesan reka letak Seterusnya, kami mengawal JS Untuk mencapai selang paparan gambar yang berbeza, kami perlu menggunakan setInterval atau setTimeout di sini (kerana ini digunakan Easy to get atas.)
Setiap kali kami melompat, kami mengawal sebelah kiri kedudukan UL, supaya pemandangan di bawah ul boleh dipaparkan secara berbeza setiap kali, dan kiri ini ditentukan mengikut lebar tingkap Gambar pertama Sudah tentu kiri ialah -800 * 0, yang kedua ialah -800*1, yang ketiga ialah -800*2...dan seterusnya kita boleh mendapatkan kod berikut
<script>
(function(){
var slider = document.getElementById("slider");
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li");
var len = imglis.length;
var index = 0;
setInterval(function(){
if(index >= len){
index = 0;
}
imgul.style.left = - (800 * index) + "px";
index++;
},2000);
})();
</script>
Kod JS kelihatan sangat mudah seperti ini Di sini saya menetapkan urutan lompatan 2 saat, dan kemudian selepas bilangan lompatan lebih besar daripada atau sama dengan bilangan gambar, biarkan ia kembali ke gambar pertama.
Kandungan di atas adalah pengenalan editor kepada Javascript untuk melaksanakan kesan karusel imej (1) untuk membuat imej melonjak.
Ganti aksara rentetan dalam javascriptMar 11, 2025 am 12:07 AMPenjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?Mar 18, 2025 pm 03:12 PMArtikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?Mar 18, 2025 pm 03:14 PMArtikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
kesan matriks jQueryMar 10, 2025 am 12:52 AMBawa kesan filem matriks ke halaman anda! Ini adalah plugin jQuery yang sejuk berdasarkan filem terkenal "The Matrix". Plugin mensimulasikan kesan aksara hijau klasik dalam filem, dan hanya pilih gambar dan plugin akan mengubahnya menjadi gambar gaya matriks yang diisi dengan aksara angka. Datang dan cuba, sangat menarik! Bagaimana ia berfungsi Plugin memuat imej ke kanvas dan membaca nilai piksel dan warna: data = ctx.getimagedata (x, y, settings.grainsize, settings.grainsize) .data Plugin dengan bijak membaca kawasan segi empat tepat gambar dan menggunakan jQuery untuk mengira warna purata setiap kawasan. Kemudian, gunakan
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?Mar 18, 2025 pm 03:16 PMArtikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Cara Membina Slider JQuery MudahMar 11, 2025 am 12:19 AMArtikel ini akan membimbing anda untuk membuat karusel gambar mudah menggunakan perpustakaan jQuery. Kami akan menggunakan perpustakaan BXSlider, yang dibina di atas jQuery dan menyediakan banyak pilihan konfigurasi untuk menubuhkan karusel. Pada masa kini, Gambar Carousel telah menjadi ciri yang mesti ada di laman web - satu gambar lebih baik daripada seribu perkataan! Selepas membuat keputusan untuk menggunakan karusel gambar, soalan seterusnya adalah bagaimana untuk menciptanya. Pertama, anda perlu mengumpul gambar-gambar resolusi tinggi yang berkualiti tinggi. Seterusnya, anda perlu membuat karusel gambar menggunakan HTML dan beberapa kod JavaScript. Terdapat banyak perpustakaan di web yang dapat membantu anda membuat karusel dengan cara yang berbeza. Kami akan menggunakan Perpustakaan BXSlider Sumber Terbuka. Perpustakaan BXSlider menyokong reka bentuk responsif, jadi karusel yang dibina dengan perpustakaan ini dapat disesuaikan dengan mana -mana
Meningkatkan markup struktur dengan JavaScriptMar 10, 2025 am 12:18 AMMata utama yang dipertingkatkan penandaan berstruktur dengan JavaScript dapat meningkatkan kebolehcapaian dan pemeliharaan kandungan laman web sambil mengurangkan saiz fail. JavaScript boleh digunakan secara berkesan untuk menambah fungsi secara dinamik ke elemen HTML, seperti menggunakan atribut CITE untuk memasukkan pautan rujukan secara automatik ke dalam rujukan blok. Mengintegrasikan JavaScript dengan tag berstruktur membolehkan anda membuat antara muka pengguna yang dinamik, seperti panel tab yang tidak memerlukan penyegaran halaman. Adalah penting untuk memastikan bahawa peningkatan JavaScript tidak menghalang fungsi asas laman web; Teknologi JavaScript Lanjutan boleh digunakan (
Cara memuat naik dan memuat turun fail CSV dengan sudutMar 10, 2025 am 01:01 AMSet data sangat penting dalam membina model API dan pelbagai proses perniagaan. Inilah sebabnya mengapa mengimport dan mengeksport CSV adalah fungsi yang sering diperlukan. Dalam tutorial ini, anda akan belajar cara memuat turun dan mengimport fail CSV dalam sudut
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
