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
Tutorial Persediaan API Carian Google CustomMar 04, 2025 am 01:06 AMTutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y
Contoh warna json failMar 03, 2025 am 12:35 AMSiri artikel ini ditulis semula pada pertengahan 2017 dengan maklumat terkini dan contoh segar. Dalam contoh JSON ini, kita akan melihat bagaimana kita dapat menyimpan nilai mudah dalam fail menggunakan format JSON. Menggunakan notasi pasangan nilai utama, kami boleh menyimpan apa-apa jenis
Bina Aplikasi Web Ajax anda sendiriMar 09, 2025 am 12:11 AMJadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J
8 plugin susun atur halaman jquery yang menakjubkanMar 06, 2025 am 12:48 AMLeverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual
Apa itu ' ini ' Dalam JavaScript?Mar 04, 2025 am 01:15 AMMata teras Ini dalam JavaScript biasanya merujuk kepada objek yang "memiliki" kaedah, tetapi ia bergantung kepada bagaimana fungsi dipanggil. Apabila tidak ada objek semasa, ini merujuk kepada objek global. Dalam penyemak imbas web, ia diwakili oleh tetingkap. Apabila memanggil fungsi, ini mengekalkan objek global; tetapi apabila memanggil pembina objek atau mana -mana kaedahnya, ini merujuk kepada contoh objek. Anda boleh mengubah konteks ini menggunakan kaedah seperti panggilan (), memohon (), dan mengikat (). Kaedah ini memanggil fungsi menggunakan nilai dan parameter yang diberikan. JavaScript adalah bahasa pengaturcaraan yang sangat baik. Beberapa tahun yang lalu, ayat ini
Tingkatkan pengetahuan jQuery anda dengan penonton sumberMar 05, 2025 am 12:54 AMJQuery adalah rangka kerja JavaScript yang hebat. Walau bagaimanapun, seperti mana -mana perpustakaan, kadang -kadang perlu untuk mendapatkan di bawah tudung untuk mengetahui apa yang sedang berlaku. Mungkin kerana anda mengesan bug atau hanya ingin tahu tentang bagaimana jQuery mencapai UI tertentu
10 helaian cheat mudah alih untuk pembangunan mudah alihMar 05, 2025 am 12:43 AMSiaran ini menyusun helaian cheat berguna, panduan rujukan, resipi cepat, dan coretan kod untuk perkembangan aplikasi Android, BlackBerry, dan iPhone. Tiada pemaju harus tanpa mereka! Panduan Rujukan Gesture Touch (PDF) Sumber yang berharga untuk desig
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
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
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
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
