Efek pengguliran JS yang mulus dapat dilihat di hampir semua halaman web. Beberapa mungkin plug-in, tetapi pada kenyataannya, menggunakan JavaScript asli relatif sederhana.
Hal utama adalah menggunakan pengetahuan lokasi JS.
1.innerhtml: atur atau dapatkan tag html dari elemen
2.scrollleft: atur atau dapatkan jarak antara batas kiri objek dan ujung paling kiri dari konten yang saat ini terlihat di jendela
3.OffsetWidth: atur atau dapatkan lebar label yang ditentukan
4.setInterval (): Atur metode untuk memulai secara teratur
5.ClearInterval (); Bersihkan timer
Gambar reproduksi:
Sneak: Demo
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> JavaScript Gulir Produksi </iteme>
</head>
<body>
<tyle>
/*conment*/
*{
Margin: 0;
Padding: 0;
}
img {max-width: 100%;}
.wadah{
Max-Width: 620px;
margin: 0 otomatis;
Padding-top: 50px;
}
.text-center {text-align: center;}
.list-inline li {
Tampilan: blok inline;
}
.hide {display: none;}
jam {
Margin: 20px 0;
}
.menandai{
Latar Belakang-Color: #CCC;
Padding: 5px 0;
}
.tag li {
padding: 0 10px;
Border-left: 1px solid #fff;
kursor: pointer;
}
.tag li: anak pertama {
Perbatasan-kiri: transparan;
}
.tag li.active {
latar belakang-warna: #ddd;
}
.menggulir{
Posisi: kerabat;
padding: 10px;
margin-bottom: 20px;
latar belakang-warna: #ddd;
}
.membungkus{
meluap: tersembunyi;
}
.isi{
Min-lebar: 3000px;
Tinggi: 200px;
}
.content ul {
float: kiri;
}
.content ul li {
Tampilan: blok inline;
Max-Width: 200px;
}
#prev,#next {
Lebar: 50px;
Tinggi: 50px;
margin -top: -25px;
Latar Belakang-Color: #CCC;
Line-Height: 50px;
Teks-Align: tengah;
kursor: pointer;
}
#prev {
Posisi: Absolute;
Kiri: 0;
Atas: 50%;
Border-Radius: 0 25px 25px 0;
}
#Berikutnya{
Posisi: Absolute;
Kanan: 0;
Atas: 50%;
Border-Radius: 25px 0 0 25px;
}
</tyle>
<div>
<h1> Picture menggulir produksi </h1>
<Hr>
<div>
<Div id = "Wrap">
<Div id = "Content">
<ul id = "list1">
<li> <img src = "freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "straw.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<Div id = "prev">
Sebelumnya
</div>
<Div id = "NEXT">
Berikutnya
</div>
</div>
</div>
<script>
var wrap = document.getElementById ('wrap');
var list1 = document.geteLementById ('list1');
var list2 = document.geteLementById ('list2');
var prev = document.getElementById ('prev');
var next = document.geteLementById ('next');
// Buat salinan daftar konten
list2.innerhtml = list1.innerHtml;
// Ubah ke kiri
fungsi gulir () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.scrollleft = 0;
}
kalau tidak{
wrap.scrollleft ++;
}
}
timer = setInterval (gulir, 1);
// Gunakan ClearInterval () untuk tinggal mouse
wrap.onmouseover = function () {
clearInterval (timer);
}
wrap.onmouseout = function () {
timer = setInterval (gulir, 1);
}
// percepatan ke kiri
fungsi scroll_l () {
if (wrap.scrollleft> = list2.offsetWidth) {
wrap.scrollleft = 0;
}
kalau tidak{
wrap.scrollleft ++;
}
}
// Gulir ke kanan
fungsi scroll_r () {
if (wrap.scrollleft <= 0) {
wrap.scrollleft+= list2.offsetWidth;
}
kalau tidak{
Wrap.scrollleft--;
}
}
prev.onClick = function () {
clearInterval (timer);
Ubah (0)
}
next.onClick = function () {
clearInterval (timer);
Ubah (1)
}
function change (r) {
if (r == 0) {
timer = setInterval (scroll_l, 60);
wrap.onmouseout = function () {
timer = setInterval (scroll_l, 60);
}
}
if (r == 1) {
timer = setInterval (scroll_r, 60);
wrap.onmouseout = function () {
timer = setInterval (scroll_r, 60);
}
}
}
</script>
</body>
Kode yang sangat ringkas dan praktis, tolong percantiknya sesuai dengan kebutuhan proyek Anda.