南强小屋 Design By 杰米
实例如下：
<!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=utf-8" />
<title>JS网页特效-无特效图片焦点图特效（可一个页面多用）</title>
<style type="text/css">
* { padding:0; margin:0; font-size:12px; }
ul, li { list-style: none; }
.indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;}
.indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative}
.indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus .focusBox .bigPic li{width:419px;height:185px}
.indexFocus .focusBox .bigPic img{width:419px;height:185px}
.indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/}
.indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus .focusBox .picText a{padding-left:10px;color:#fff;}
</style>
<style type="text/css">
* { padding:0; margin:0; font-size:12px; }
ul, li { list-style: none; }
.indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;}
.indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative}
.indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus .focusBox .bigPic li{width:419px;height:185px}
.indexFocus .focusBox .bigPic img{width:419px;height:185px}
.indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/}
.indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus .focusBox .picText a{padding-left:10px;color:#fff;}
</style>
<script language="javascript">
function mainfun(mainObj,t){
function getID(id){return document.getElementById(id)}
function getTag(tag,obj){return (typeof obj=='object'"alpha(opacity="+n+")";}}
var cut = 0;
var timer='';
var num = getTag('li',getTag('div',getID(mainObj))[0]).length;
var getpic = getTag('li',getTag('div',getID(mainObj))[0]);
var getbtn = getTag('li',getTag('div',getID(mainObj))[1]);
var gettext = getTag('li',getTag('div',getID(mainObj))[2]);
for(i=0;i<num;i++){getpic[i].style.display="none";gettext[i].style.display="none";getbtn[i].onclick=(function(i){
return function(){ getbtn[i].className="sel";changePic(i);}})(i);}
getpic[cut].style.display="block";
getbtn[cut].className="sel";
gettext[cut].style.display="block";
getID(mainObj).onmouseover=function(){clearInterval(timer);}
getID(mainObj).onmouseout=function(){timer = setInterval(autoPlay,t);}
function changePic(ocut){
for(i=0;i<num;i++){cut=ocut;
getpic[i].style.display="none";
getbtn[i].className=""
gettext[i].style.display="none";
}
getpic[cut].style.display="block";
getbtn[cut].className="sel";
gettext[cut].style.display="block"
}
function autoPlay(){
//alert(cut);
if(cut>=num-1){cut=0}else{cut++}
changePic(cut);
}
timer = setInterval(autoPlay,t);
}
function changeMenu(){
function getID(id){return document.getElementById(id)}
function getTag(tag,obj){return (typeof obj=='object'"menu");var getBtn = getTag("h2",menu); var getUl = getTag("ul",menu);var num = getTag("h2",menu).length;for(i=0;i<num;i++){
getUl[i].style.display="none";
getBtn[i].onclick=(function(i){
return function(){
clickMenu(i);
}
})(i);
}
getUl[sel].style.display="block";
function clickMenu(sel){
for(i=0;i<num;i++){
getUl[i].style.display="none";
}
getUl[sel].style.display="block";
}
}
</script>
</head>
<body style="background:url(images/bodyBg.jpg) repeat #333;">
<h1 style="height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal">无特效图片焦点图特效（可一个页面多用）</h1>
<div style="background:#FFF; padding:50px;">
<!--效果开始-->
<div class="indexFocus">
<div id="movePic1" class="focusBox">
<div class="bigPic" id="oPic">
<ul>
<li><a href="#"><img src="/UploadFiles/2021-04-02/ink_120615_10.jpg">
以上这篇纯JS焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
js焦点图特效
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无纯JS焦点图特效实例(可一个页面多用)的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。