Dies ist ein jQuery-basiertes Bildwechsel-Fokuskarten-Plugin. Die Funktion dieses jQuery-Fokuskarten-Plugins besteht darin, dass Bilder in Gruppen umgeschaltet werden können, was bedeutet, dass mehrere Bilder gleichzeitig umgeschaltet werden können Mit anderen Focus-Map-Plug-Ins kann Geld gespart werden, sodass den Benutzern mehr Bilder angezeigt werden können, was sehr praktisch ist.
Implementierungscode.
HTML-Code:
js代码：
$(function () {
var $number = Math.ceil($('.scroll ul li').length / 4); //Anzahl der Bildlaufbildschirme abrufen
var margin = 10; //Legen Sie den Bildabstand fest
var $w = $('.scroll li').width() margin; // Breite eines Bildschirmbilds
var $width = $w * $number * 2 // UL-Breite festlegen
var pre = $('.device .pre');
var next = $('.device .next');
If ($number == 1) { pre.hide(); next.hide();
$('.scroll ul').width($width);
var num = 0;
Funktion autoscroll() {
num ;
If ($number == 1) { return false }
If (num == $number) {
num = 0;
}
var distance = -2 * $w * num;
$('.scroll ul').stop().animate({ left: distance });
}
var scrollChange = setInterval(autoscroll, 8000);
//Bewegen Sie die Maus, pausieren Sie das Scrollen
$(".scroll ul,.pre,.next").mouseover(function () {
$('.scroll ul').stop()
Clearinterval (Bildlaufwechsel);
});
// Die Maus bewegt sich weg, das Rollen geht weiter
$('.scroll ul,.pre,.next').mouseout(function () {
scrollChange = setInterval(autoscroll, 8000);
});
//Nächste Gruppe
next.click(function () {
num ;
If (num >= $number) { num = 0 }
var leftdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: leftdis });
});
//Vorherige Gruppe
pre.click(function () {
num--;
If (num < 0) { num = $number - 1 }
var rightdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: rightdis });
});
});
HTML5资源教程
HTML5资源教程
HTML5资源教程
HTML5资源教程
HTML5资源教程
