Analisis ringkas tentang cara melaksanakan karusel mudah menggunakan js-tutorial js-php.cn

Analisis ringkas tentang cara melaksanakan karusel mudah menggunakan js

Lepaskan： 2021-07-29 15:29:23

asal

2469 orang telah melayarinya

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(&#39;imgbox()&#39;);
}
}
setInterval(&#39;imgbox()&#39;,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>

Salin selepas log masuk

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

, , , ... dan beberapa teg semantik seperti

....

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 pemasa

Objek 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);

Salin selepas log masuk

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;
}

Salin selepas log masuk

Img ialah kotak div yang besar, img ialah gambar,

<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>

Salin selepas log masuk

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!