下面小编就为大家带来一篇纯射流研究…焦点图特效实例（可一个页面多用)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实例如下：
！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焦点图特效的例子(一页多用)是边肖分享的全部内容。希望给大家一个参考，多多支持我们。
