Ini ialah pemalam peta fokus penukaran imej berasaskan jQuery Ciri pemalam peta fokus jQuery ini ialah gambar boleh ditukar dalam kumpulan, yang bermaksud berbilang gambar boleh ditukar pada satu masa pemalam peta fokus lain, ia boleh menjimatkan wang Lebih banyak ruang membolehkan lebih banyak gambar dipaparkan kepada pengguna, yang sangat praktikal.
Kod pelaksanaan.
kod html:
js代码:
$(fungsi () {
var $number = Math.ceil($('.scroll ul li').length / 4); //Dapatkan bilangan skrin skrol
var margin = 10; //Tetapkan jarak imej
var $w = $('.scroll li').width() margin; // Lebar imej skrin
var $width = $w * $number * 2; //Tetapkan lebar ul
var pra = $('.peranti .pra');
var seterusnya = $('.device .next');
Jika ($nombor == 1) { pre.hide(); next.hide();
$('.scroll ul').width($width);
var num = 0;
fungsi autoscroll() {
nombor ;
Jika ($nombor == 1) { return false }
Jika (bilangan == $nombor) {
bilangan = 0;
}
jarak var = -2 * $w * num;
$('.scroll ul').stop().animate({ left: distance });
}
var scrollChange = setInterval(autoscroll, 8000);
//Tuding tetikus, jeda menatal
$(".scroll ul,.pre,.next").mouseover(function () {
$('.scroll ul').stop()
Clearinterval (tukar tatal);
});
// Tikus menjauh, bergolek diteruskan
$('.scroll ul,.pre,.next').mouseout(function () {
scrollChange = setInterval(autoscroll, 8000);
});
//Kumpulan seterusnya
seterusnya.klik(fungsi () {
nombor ;
Jika (bilangan >= $nombor) { nombor = 0 }
var leftdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: leftdis });
});
//Kumpulan sebelumnya
pra.klik(fungsi () {
nombor--;
Jika (bilangan < 0) { bilangan = $nombor - 1 }
var rightdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: rightdis });
});
});