html:
<div class="banner"> <div class="b-img"> <a href="#" style="background:url(img/banner1.png) center no-repeat;background-size:100% auto;"></a> <a href="#" style="background:url(img/banner2.png) center no-repeat;background-size:100% auto;"></a> <a href="#" style="background:url(img/banner3.png) center no-repeat;background-size:100% auto;"></a> </div> <div class="b-list"></div> <a class="bar-left" href="#"><em></em></a><a class="bar-right" href="#"><em></em></a> </div>
css:
.banner { width:100%; height:750px; overflow:hidden; position:relative; font-size:0 } .b-img { height:500px; position:absolute; left:0; top:0 } .b-img a { display:block; height:750px; float:left } .b-list { height:50px; padding-top:700px; position:relative; margin:0 auto; z-index:1 } .b-list span { display:block; cursor:pointer; width:14px; height:14px; border-radius:50%; border:3px solid #fff; float:left; margin:0 5px; _margin:0 3px } .b-list .spcss { border:3px solid #14ab04 } .bar-left { position:absolute; z-index:1; display:block; width:100px; height:100%; left:0; background:0 0; top:0 } .bar-right { position:absolute; z-index:1; display:block; width:100px; height:100%; right:0; background:0 0; top:0 } .bar-left em { display:block; width:50px; height:100px; background:url(../img/arrow.png) 0 0 no-repeat; margin:0 auto; margin-top:325px } .bar-right em { display:block; width:50px; height:100px; background:url(../img/arrow.png) -50px 0 no-repeat; margin:0 auto; margin-top:325px } .bar-left .emcss { background-position:0 -100px } .bar-right .emcss { background-position:-50px -100px }
js:
$(function () { var n = 0; var imgLength = $(".b-img a").length; var ctWidth = imgLength * 100; var itemWidth = 1 / imgLength * 100; $(".b-img").width(ctWidth + "%"); $(".b-img a").width(itemWidth + "%"); $(".b-list").width(imgLength * 30); if (imgLength > 1) { for (var i = 0; i < imgLength; i++) { var listSpan = $("<span></span>") $(".b-list").append(listSpan); } } $(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss"); $(".bar-right em").click(function () { if (n == imgLength - 1) { var ctPosit = (n + 1) * 100; $(".banner").append($(".b-img").clone()); $(".b-img:last").css("left", "100%"); $(".b-img:first").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".b-img:last").animate({ "left": "0" }, 1000); var setTime0 = setTimeout(function () { $(".banner .b-img:first").remove(); }, 1000); n = 0; $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss"); } else { n++; var ctPosit = n * 100; $(".b-img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss"); } }) $(".bar-left em").click(function () { if (n == 0) { var stPosit = imgLength * 100; var etPosit = (imgLength - 1) * 100; $(".banner").prepend($(".b-img").clone()); $(".b-img:first").css("left", "-" + stPosit + "%"); $(".b-img:last").animate({ "left": "100%" }, 1000); $(".b-img:first").animate({ "left": "-" + etPosit + "%" }, 1000); var setTime0 = setTimeout(function () { $(".banner .b-img:last").remove(); }, 1000); n = imgLength - 1; $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss"); } else { n--; var ctPosit = n * 100; $(".b-img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss"); } }) $(".b-list span").click(function () { var lsIndex = $(this).index(); n = lsIndex; var ctPosit = n * 100; $(".b-img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(this).addClass("spcss").siblings("span").removeClass("spcss"); }) function rollEnvent() { if (n == imgLength - 1) { var ctPosit = (n + 1) * 100; $(".banner").append($(".b-img").clone()); $(".b-img:last").css("left", "100%"); $(".b-img:first").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".b-img:last").animate({ "left": "0" }, 1000); var setTime0 = setTimeout(function () { $(".banner .b-img:first").remove(); }, 1000); n = 0; $(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss"); } else { n++; var ctPosit = n * 100; $(".b-img").animate({ "left": "-" + ctPosit + "%" }, 1000); $(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss"); } } var slidesetInterval = setInterval(rollEnvent, 4000); $(".banner").hover(function () { clearInterval(slidesetInterval); }, function () { slidesetInterval = setInterval(rollEnvent, 4000); }); $(".bar-left").mouseover(function () { $(this).css("background", "url(img/arr-bg.png)"); $(this).find("em").addClass("emcss"); }).mouseleave(function () { $(this).css("background", "none"); $(this).find("em").removeClass("emcss"); }) $(".bar-right").mouseover(function () { $(this).css("background", "url(img/arr-bg.png)"); $(this).find("em").addClass("emcss"); }).mouseleave(function () { $(this).css("background", "none"); $(this).find("em").removeClass("emcss"); }) })
最后附上两张图片:
左右按钮的遮罩层: ,左右按钮图片