jquery scroll left and right focus image banner image to display up and down page buttons after the mouse passes_jquery

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

Copy code The code is as follows:

• 
  


• 
  


• 
  
  
• 
  

Copy code The code is as follows:

@charset "utf-8";
img { border: 0px ; }
.bannerbox { width: 320px; height: 150px; overflow: hidden; margin: 0px auto; }
#focus { width: 320px; height: 150px; clear: both; overflow: hidden; position: relative; float: left; }
#focus ul { width: 320px; height: 150px; float: left; position: absolute; clear: both; padding: 0px; margin: 0px; }
#focus ul li { float: left; width: 320px; height: 150px; overflow: hidden; position: relative; padding: 0px; margin: 0px; }
#focus .preNext { width: 250px; height: 150px; position: absolute; top: 0px; cursor: pointer; }
#focus .pre { left: 0; background: url(../images/sprite.png) no-repeat left center; }
#focus .next { rightright : 0; background: url(../images/sprite1.png) no-repeat rightright center; }

js file

Copy Code The code is as follows:

$(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);
}
});