演示
Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 17:20:28
Original
987 people have browsed it

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
jquery scroll left and right focus image banner image to display up and down page buttons after the mouse passes_jquery
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);
}
});
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template