Rumah >hujung hadapan web >tutorial js >Analisis ringkas tentang cara melaksanakan karusel mudah menggunakan js
Analisis ringkas tentang cara melaksanakan karusel mudah menggunakan js
- **asal
- 2021-07-28 15:57:462450semak imbas
Idea reka bentuk: Gunakan pemasa dalam js untuk mencapai kesan karusel imej, dan letakkan semua imej ke dalam folder img yang saya simpan pada masa itu. Kemudian letakkan tiga foto masing-masing ke dalam tiga div Paparan dan penyembunyian setiap div dikawal oleh pemasa Div dengan tiga nombor di sudut kiri bawah mewakili gambar yang mana kesemuanya, jadi terdapat tiga div.
Kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.imgbox{
width: 100%;
height:400px;
background-color: black;
transform: 1s;
}
.img{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:cover ;
}
.img0{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:100% ;
}
.img1{
width: 100%;
height:100%;
background-image: url(img/5572568_110213373115_2.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img2{
width: 100%;
height:100%;
background-image: url(img/5875f5fb7a8f8.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img3{
width: 100%;
height:100%;
background-image: url(img/980.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
ul{
margin-left:-30px ;
list-style-type: none;
position: relative;
margin-top: -100px;
line-height: 50px;
}
ul li{
float: left;
width: 50px;
height:50px;
border:1px solid #000000;
text-align: center;
background-color: aliceblue;
}
.div{
background-color: orange;
line-height: 50px;
}
.div1{
background-color: gainsboro;
line-height: 50px;
}
</style>
<script type="text/javascript">
var i=0;
function imgbox(){
i++;
if(i<4){
document.getElementById("img").className="img"+i;
if(i==1){
document.getElementById("one").className="div";
document.getElementById("two").className="div1";
document.getElementById("three").className="div1";
}
if(i==2){
document.getElementById("one").className="div1";
document.getElementById("two").className="div";
document.getElementById("three").className="div1";
}
if(i==3){
document.getElementById("one").className="div1";
document.getElementById("two").className="div1";
document.getElementById("three").className="div";
}
}
if(i==4){
i=0;
clearInterval('imgbox()');
}
}
setInterval('imgbox()',1000);
</script>
</head>
<body>
<div class="imgbox">
<div class="img" id="img"></div>
<ul id="ul">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
</div>
</body>
</html>Memahami HTML
HTML ialah apa yang kami panggil halaman web dan format fail web halaman ialah .html Format. Di mata kita, ia adalah bahasa hiperteks yang tidak memerlukan kompilasi atau pemprosesan tambahan Setelah ditulis dan dibuka, ia adalah halaman web.
Html terdiri daripada banyak teg seperti e388a4556c0f65e1904146cc1a846bee, c8b28895262a62371d18ac056c4442e2, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b... dan beberapa teg semantik seperti 1aa9e5d373740b65a0cc8f0a02150c53 ;,c787b9a589a3ece771e842a6176cf8e9....
Apakah itu js:
js (JavaScript) ialah bahasa skrip literal. Skrip JavaScript boleh diletakkan terus dalam bahasa HTML dan dijalankan pada pelayar yang menyokong js. Ia digunakan secara meluas dalam pembangunan aplikasi web dan sering digunakan untuk menambah pelbagai fungsi dinamik pada halaman web untuk menyediakan pengguna dengan kesan penyemakan imbas yang lebih lancar dan lebih cantik. Apabila operasi tertentu dilakukan semasa menyemak imbas halaman web, acara dijana dan program yang ditulis dalam JavaScript boleh bertindak balas kepada acara yang sepadan.
pemasa js: Tentukan set pemasa('imgbox()',1000);
Dayakan pemasaObjek tetingkap menyediakan dua kaedah untuk mencapai kesan pemasa, iaitu window.setTimeout() dan window.setInterval. Yang pertama boleh membuat sekeping kod dijalankan selepas masa yang ditentukan manakala yang terakhir boleh membuat sekeping kod dijalankan sekali setiap masa yang ditentukan. Prototaip mereka adalah seperti berikut:
Antaranya, kod boleh menjadi sekeping kod yang disertakan dalam tanda petikan, atau ia boleh menjadi nama fungsi Pada masa yang ditetapkan, sistem akan memanggil fungsi secara automatik . Apabila menggunakan fungsi Apabila nama digunakan sebagai pemegang panggilan, ia tidak boleh mengambil sebarang parameter apabila menggunakan rentetan, parameter yang akan dihantar boleh ditulis di dalamnya. Parameter kedua dalam kedua-dua kaedah ialah millisec, yang mewakili bilangan milisaat untuk kelewatan atau pelaksanaan berulang.window.setTimeout(code,millisec); window.setInterval(code,millisec);Kaedah penulisan khusus adalah seperti berikut:
Nama fungsi, tanpa parameter setTimeout (test,1000 string, executable code setTimeout ('test()', 1000); fungsi tanpa nama setTimeout (function(){},1000 Nota: Penggunaan setInterval adalah sama seperti setTimeout
Panggil fungsi dengan parameter setTimeout ('test(parameter)',1000);
susun atur div: gunakan ul, li untuk reka letak
Ubah suai gaya seperti berikut:
Struktur HTML:ul{
margin-left:-30px ;//据左部边距
list-style-type: none;//去除默认ul样式
position: relative;//采用相对定位
margin-top: -100px;//据顶部边距
line-height: 50px;//行高
}
ul li{
float: left;//浮动
width: 50px;
height:50px;
border:1px solid #000000;//边框
text-align: center;//文字居中
background-color: aliceblue;
}Img ialah kotak div yang besar, img ialah gambar, ff6d136ddc5fdfeffaf53ff6ee95f185 <div> <div id="img"></div> <ul id="ul"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> </ul> </div>
Atas ialah kandungan terperinci Analisis ringkas tentang cara melaksanakan karusel mudah menggunakan js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!