jQuery可关闭的点击圆点图片切换代码焦点图js特效

最新推荐文章于 2022-02-25 11:00:48 发布

转载最新推荐文章于 2022-02-25 11:00:48 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/12665

文章标签：

#jquery #javascript #css3

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这个博客分享了一段JavaScript代码，用于创建一款全屏的jQuery焦点图特效。该特效具有图片轮播功能，并且用户可以关闭。代码中包括了窗口大小适配、图片切换动画以及关闭按钮的实现，适用于网页中的全屏图片展示。

下载地址

可关闭的jQuery焦点图特效是一款全屏图片轮播，功能很强大且很实用和常用的jquery特效。$(function() { if ($.cookie("weijuju_banner_10") != 1) { var f = $(window).width() * 0.39375; $("#online_qq_layer").hide(); $("#focus").height(f); $("#focus ul li").width($(window).width()); $("#top_banner").show().animate({ height: f + "px" }, 2000); $(".top_banner_close").click(function() { $("#top_banner").remove(); var h = new Date(); h.setTime(h.getTime() + (12 * 60 * 60 * 1000)); $.cookie("weijuju_banner_10", "1", { expires: h }); $("#online_qq_layer").show() }); var j = $("#focus").width(); var a = $("#focus ul li").length; var c = 0; var g; var e = "

"; for (var d = 0; d < a; d++) { e += "" } e += "

"; $("#focus").append(e); $("#focus .btnBg").css("opacity", 0.5); $("#focus .btn span").css("opacity", 0.4).mouseover(function() { c = $("#focus .btn span").index(this); b(c) }).eq(0).trigger("mouseover"); $("#focus .preNext").css("opacity", 0.2).hover(function() { $(this).stop(true, false).animate({ opacity: "0.5" }, 300) }, function() { $(this).stop(true, false).animate({ opacity: "0.2" }, 300) }); $("#focus .pre").click(function() { c -= 1; if (c == -1) { c = a - 1 } b(c) }); $("#focus .next").click(function() { c += 1; if (c == a) { c = 0 } b(c) }); $("#focus ul").css("width", j * (a)); $("#focus").hover(function() { clearInterval(g) }, function() { g = setInterval(function() { b(c); c++; if (c == a) { c = 0 } }, 5000) }).trigger("mouseleave"); function b(h) { var i = -h * j; $("#focus ul").stop(true, false).animate({ left: i }, 300); $("#focus .btn span").stop(true, false).animate({ opacity: "0.4" }, 300).eq(h).stop(true, false).animate({ opacity: "1" }, 300) } }});