Javascript melaksanakan kesan karusel imej (1) Buat kemahiran jump

Javascript melaksanakan kesan karusel imej (1) Buat kemahiran jump_javascript imej

WBOY

Lepaskan： 2016-05-16 15:15:13

asal

1305 orang telah melayarinya

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="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.