jquery+css实现焦点图定时切换显示特效，这个窗口的右下角带左右按钮和图片编号显示，可根据自己的需求来自定义。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>jquery+css实现宽屏焦点图切换特效_武鸣人</title>
<style type=text/css>
BODY {
LINE-HEIGHT: 1.5; FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif; COLOR: #333333; FONT-SIZE: 12px
}
A {
COLOR: #333; TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}
.wuming {
POSITION: relative; WIDTH: 960px; HEIGHT: 315px;
margin:0 auto;
}
.nav_wuming {
BACKGROUND: url(/img/20240420_www_wuming_ren_9.png) no-repeat
}
.prevBtn {
BACKGROUND: url(/img/20240420_www_wuming_ren_9.png) no-repeat
}
.nextBtn {
BACKGROUND: url(/img/20240420_www_wuming_ren_9.png) no-repeat
}
.imgSelected {
BACKGROUND: url(/img/20240420_www_wuming_ren_9.png) no-repeat
}
.nav_wuming {
POSITION: absolute; WIDTH: 125px; BOTTOM: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 30px; RIGHT: 10px; FONT-WEIGHT: bold
}
.nav_wuming A {
TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 25px; FLOAT: left; VERTICAL-ALIGN: middle
}
.prevBtn {
DISPLAY: block; BACKGROUND-POSITION: 0px -30px; HEIGHT: 30px
}
.nextBtn {
DISPLAY: block; BACKGROUND-POSITION: -100px -30px; HEIGHT: 30px
}
.imgSelected {
BACKGROUND-POSITION: 1px -60px; COLOR: #000
}
</style>
<SCRIPT type=text/javascript src="/img/jquery_wuming_ren.js"></SCRIPT>
<SCRIPT type=text/javascript>
//<![CDATA[
$(function() {
(function() {
var curr = 0;
$("#nav_wuming .trigger").each(function(i) {
$(this).click(function() {
curr = i;
$("#wuming img").eq(i).fadeIn("slow").siblings("img").hide();
$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
return false;
});
});
var pg = function(flag) {
//flag:true表示前翻， false表示后翻
if (flag) {
if (curr == 0) {
todo = 2;
} else {
todo = (curr - 1) % 3;
}
} else {
todo = (curr + 1) % 3;
}
$("#nav_wuming .trigger").eq(todo).click();
};
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
$("#prev").click(function() {
pg(true);
return false;
});
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
$("#next").click(function() {
pg(false);
return false;
});
//自动翻
var timer = setInterval(function() {
todo = (curr + 1) % 3;
$("#nav_wuming .trigger").eq(todo).click();
}, 4000);
//鼠标悬停在触发器上时停止自动翻
$("#nav_wuming a").hover(function() {
clearInterval(timer);
},
function() {
timer = setInterval(function() {
todo = (curr + 1) % 3;
$("#nav_wuming .trigger").eq(todo).click();
}, 1500);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
);
})();
});
//]]>
</SCRIPT>
</head>
<body style="text-align:left">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<span style="color:#FF0000">需要加载js文件，请刷新页面后看效果。</span>
<DIV id=wuming class="wuming"><IMG src="/img/20240420_www_wuming_ren_10.jpg"> <IMG style="DISPLAY: none" src="/img/20240420_www_wuming_ren_11.jpg"> <IMG style="DISPLAY: none" src="/img/20240420_www_wuming_ren_12.jpg">
<DIV id=nav_wuming class=nav_wuming><A id=prev class=prevBtn href="javascript:void(0)"></A><A class="trigger imgSelected" href="javascript:void(0)">1</A><A class=trigger href="javascript:void(0)">2</A><A class=trigger href="javascript:void(0)">3</A><A id=next class=nextBtn href="javascript:void(0)"></A></DIV></DIV>
</body>
</html>本文来自武鸣人网站，转载请注明出处