下面小编就为大家带来一篇纯射流研究…焦点图特效实例（可一个页面多用)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实例如下：
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
titleJS网页特效-无特效图片焦点图特效（可一个页面多用)/标题
style type='text/css '
* {填充：0;边距：0;字体大小：12px}
ul，李{列表式：无；}。索引焦点{ border:1px solid # CCC；填充：2px宽度：419像素身高：185像素边距：0自动；}。索引焦点聚焦框{宽度：419 px身高：185像素位置：相对；边距：0自动；位置：相对}。索引焦点。聚焦盒bigPic { width:419 px；身高：185像素溢出：隐藏；位置：相对}。索引焦点。聚焦盒bigPic李{宽度：419 px身高：185px}。索引焦点。聚焦盒bigPic img { width:419 px；身高：185px}。索引焦点。聚焦盒btn {高度：16px位置：绝对；右：8px底部：4pxz指数：11}。索引焦点。聚焦盒. BTN ul Li { width:15px；高度：15px行高：15px右边距：2px显示：块；背景：# fff浮动：左；文本对齐：居中；光标：指针}。索引焦点。聚焦盒btn .sel { width:15px；高度：15px背景：# B90101颜色：#fff}。索引焦点。聚焦盒picText _ BG { width:100%；高度：26px位置：绝对；左：0;底部：0;背景：# 000;滤镜：阿尔法(不透明度=50);/* IE */-moz-不透明度：0.5;/*MOZ，FF */不透明度：0.5;/*CSS3，FF1.5*/}。索引焦点。聚焦盒picText { width:100%；高度：26px行高：26px文本对齐：左对齐；字体粗细：粗体；边距：0自动；位置：绝对；左：0;底部：0;溢出：隐藏；z指数：10;}。索引焦点。聚焦盒picText a { padding-left:10px；颜色：# fff}
/风格
style type='text/css '
* {填充：0;边距：0;字体大小：12px}
ul，李{列表式：无；}。索引焦点{ border:1px solid # CCC；填充：2px宽度：419像素身高：185像素边距：0自动；}。索引焦点聚焦框{宽度：419 px身高：185像素位置：相对；边距：0自动；位置：相对}。索引焦点。聚焦盒bigPic { width:419 px；身高：185像素溢出：隐藏；位置：相对}。索引焦点。聚焦盒bigPic李{宽度：419 px身高：185px}。索引焦点。聚焦盒bigPic img { width:419 px；身高：185px}。索引焦点。聚焦盒btn {高度：16px位置：绝对；右：8px底部：4pxz指数：11}。索引焦点。聚焦盒. BTN ul Li { width:15px；高度：15px行高：15px右边距：2px显示：块；背景：# fff浮动：左；文本对齐：居中；光标：指针}。索引焦点。聚焦盒btn .sel { width:15px；高度：15px背景：# B90101颜色：#fff}。索引焦点。聚焦盒picText _ BG { width:100%；高度：26px位置：绝对；左：0;底部：0;背景：# 000;滤镜：阿尔法(不透明度=50);/* IE */-moz-不透明度：0.5;/*MOZ，FF */不透明度：0.5;/*CSS3，FF1.5*/}。索引焦点。聚焦盒picText { width:100%；高度：26px行高：26px文本对齐：左对齐；字体粗细：粗体；边距：0自动；位置：绝对；左：0;底部：0;溢出：隐藏；z指数：10;}。索引焦点。聚焦盒picText a { padding-left:10px；颜色：# fff}
/风格
脚本语言='javascript '
函数mainfun(mainObj，t){
函数getID(id){返回文档。getelementbyid(id)}
函数getTag(tag，obj){return (typeof obj=='object '？getID(obj)).getElementsByTagName(标记);}
函数alph(obj，n){ if(document。所有){ obj。风格。filter=' alpha(opacity=' n ')'；}}
var cut=0；
var timer=
var num=getTag('li '，getTag('div '，getID(mainObj))[0]).长度；
var getpic=getTag('li '，getTag('div '，getID(main obj))[0])；
var getbtn=getTag('li '，getTag('div '，getID(main obj))[1])；
var gettext=getTag('li '，getTag('div '，getID(main obj))[2])；
for(I=0；inumI){获取pic[I]。风格。display=' nonegettext[I]。风格。display=' nonegetbtn[i].onclick=(函数{
返回函数(){ getbtn[i].sel '；changePic(一);} })(I)；}
获取pic[cut]。风格。display=' block
getbtn[cut].sel '；
gettext[剪切]。风格。display=' block
getID(mainObj).onmouseover=function(){ clear interval(定时器)；}
getID(mainObj).onmouseout=function(){ timer=setInterval(autoPlay，t)；}
功能改变(ocut){
for(I=0；inumI){ cut=ocut；
获取pic[I]。风格。display=' none
getbtn[i].className=' '
gettext[I]。风格。display=' none
}
获取pic[cut]。风格。display=' block
getbtn[cut].sel '；
gettext[剪切]。风格。display=' block '
}
函数自动播放(){
//alert(剪切);
if(cut=num-1){cut=0}else{cut }
changePic(切);
}
timer=setInterval(autoPlay，t)；
}
函数changeMenu(){
函数getID(id){返回文档。getelementbyid(id)}
函数getTag(tag，obj){return (typeof obj=='object '？getID(obj)).getElementsByTagName(标记);}
var sel=0；var menu=getID(' menu ')；var getBtn=getTag('h2 '，菜单);var getUl=getTag('ul '，菜单);var num=getTag('h2 '，菜单)。长度；for(I=0；inumi ){
getUl[I]。风格。display=' none
getBtn[i].onclick=(函数{
返回函数(){
点击菜单（一);
}
})(一);
}
getUl[sel]。风格。display=' block
功能点击菜单（选择){
for(I=0；inumi ){
getUl[I]。风格。display=' none
}
getUl[sel]。风格。display=' block
}
}
/脚本
/头
body style=' background:URL(images/body BG。jpg)重复# 333；'
h1 style=' height:100px；行高：100像素字体大小：30px字体系列：'微软雅黑；颜色：# FFF；文本对齐：居中；背景：URL(图片/正文BG 3。jpg)重复-x左下角；'字体粗细：正常'无特效图片焦点图特效（可一个页面多用)/h1
div style=' background:# FFF；填充：50px '
！-效果开始-
div class='indexFocus '
div id='移动图片1 ' class='聚焦框'
div class='bigPic' id='oPic '
保险商实验所
lia href=' # ' img src=' images/ink _ 120615 _ 10。jpg ' alt='我们www.jb51.net' //a/li
lia href=' # ' img src=' images/ink _ 120615 _ 11。jpg ' alt='我们www.jb51.net' //a/li
lia href=' # ' img src=' images/ink _ 120615 _ 12。jpg ' alt='我们www.jb51.net' //a/li
lia href=' # ' img src=' images/ink _ 120615 _ 10。jpg ' alt='我们www.jb51.net' //a/li
lia href=' # ' img src=' images/ink _ 120615 _ 11。jpg ' alt='我们www.jb51.net' //a/li
/ul
/div
div class='btn' id='oBtn '
保险商实验所
li1/李
li2/李
李/李
li4/李
li5/李
/ul
/div
div class='picText' id='oText '
lia href=' https://www。jb51。net ' target=' _ blank ' web应用/a/李
lia href=' https://www。jb51。net ' target=' _ blank '它云动态/a/李
lia href=' https://www。jb51。net ' target=' _ blank ' html学习/a/李
lia href=' https://www。jb51。net ' target=' _ blank '图文特效集锦/a/李
lia href=' https://www。jb51。net ' target=' _ blank '文章特效集锦/a/李
/div
div class='picText_bg'/div
/div
/div
脚本类型=' text/JavaScript '主要乐趣('移动图片1 '，2000)/脚本
div style=' height:30px；'/div
div class='indexFocus '
div id='移动图片2 ' class='聚焦框'
div class='bigPic' id='oPic '
保险商实验所
lia href=' # ' img src=' images/ink _ 120615 _ 12。jpg ' alt='我们www.jb51.net' //a/li
lia href=' # ' img src=' images/ink _ 120615 _ 10。jpg ' alt='我们www.jb51.net' //a/li
lia href=' # ' img src=' images/ink _ 120615 _ 11。jpg ' alt='我们www.jb51.net' //a/li
/ul
/div
div class='btn' id='oBtn '
保险商实验所
li1/李
li2/李
李/李
/ul
/div
div class='picText' id='oText '
lia href=https://www。jb51。net ' target=' _ blank ' html学习/a/李
lia href=' https://www。jb51。net ' target=' _ blank '图文特效集锦/a/李
lia href=' https://www。jb51。net ' target=' _ blank '文章特效集锦/a/李
/div
div class='picText_bg'/div
/div
/div
脚本类型=' text/JavaScript '主要乐趣(' movepic 2 '，3000)/脚本
！-结束-
/div
div style=' height:200 px；颜色：# FFF；填充顶部：25px行高：28px文本对齐：居中；字体系列：'微软雅黑；'背景：url(images/bodyBg2.jpg)重复加在以-u结尾的法语词源的名词之后构成复数左上角'
p style=' font-size:16px；'我们www。jb51。FFF ' href=' https://www .jb51。net ' target=' _ blank ' www .jb51。净额/应付账款
/div
/body
/html
以上纯JS焦点图特效的例子(一页多用)是边肖分享的全部内容。希望给大家一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。