這是一款基於jQuery的圖片切換焦點圖插件，這款jQuery焦點圖插件的特點是圖片可以分組切換，也就是說一次可以切換多張圖片，相比其他焦點圖插件，它能節省更多的空間，可以向使用者展示更多的圖片，非常實用。
實作的程式碼。
html代碼：
js程式碼：
$(function () {
var $number = Math.ceil($('.scroll ul li').length / 4); //取得滾動幾個螢幕數
var margin = 10; //設定圖片間距
var $w = $('.scroll li').width() margin; // 一螢幕圖片的寬度
var $width = $w * $number * 2; //設定ul寬度
var pre = $('.device .pre');
var next = $('.device .next');
if ($number == 1) { pre.hide(); next.hide(); }
$('.scroll ul').width($width);
var num = 0;
function 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);
//滑鼠懸停，暫停滾動
$(".scroll ul,.pre,.next").mouseover(function () {
$('.scroll ul').stop()
clearInterval(scrollChange);
});
// 滑鼠移走，且捲動繼續
$('.scroll ul,.pre,.next').mouseout(function () {
scrollChange = setInterval(autoscroll, 8000);
});
//下一組
next.click(function () {
num ;
if (num >= $number) { num = 0 }
var leftdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: leftdis });
});
//上一組
pre.click(function () {
num--;
if (num
var rightdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: rightdis });
});
});
HTML5資源教程
HTML5資源教程
HTML5資源教程
HTML5資源教程
HTML5資源教程
