jquery scrolls the focus image banner image left and right, and the upper and lower pages are displayed when the mouse passes
Suitable for pages with relatively large width and height
Demo
$(function () {
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var picTimer;
var btn = "
";
for (var i = 0; i < len; i ) {
btn = "";
}
btn = "
";
$ ("#focus").append(btn);
$("#focus .btnBg").css("opacity", 0);
$("#focus .btn span").css( "opacity", 0.4).mouseenter(function () {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq( 0).trigger("mouseenter");
$("#focus .preNext").css("opacity", 0.0).hover(function () {
$(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
}, function () {
$(this).stop(true, false).animate({ "opacity": " 0" }, 300);
});
$("#focus .pre").click(function () {
index -= 1;
if (index == -1 ) { index = len - 1; }
showPics(index);
});
$("#focus .next").click(function () {
index = 1;
if (index == len) { index = 0; }
showPics(index);
});
$("#focus ul").css("width", sWidth * ( len));
$("#focus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index ;
if (index == len) { index = 0; }
}, 2800);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index * sWidth;
$("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300) ;
$("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate ({ "opacity": "1" }, 300);
}
});