这篇文章主要介绍了射流研究…实现非常简单的焦点图切换特效，是一个非常简单的射流研究…焦点图切换效果，涉及Java语言（一种计算机语言，尤用于创建网站）描述语言操作鼠标事件与图片的相关技巧，需要的朋友可以参考下
本文实例讲述了射流研究…实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下：
这是一个非常非常简单的焦点图（更像滑动门),可供初学者借鉴参考
！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=gb2312' /
标题无标题文档/标题
style type='text/css '
* {边距：0;填充：0;}
ul，李{列表式：无；}。mid { margin:0 auto；}。区域{
宽度：240像素高度：270像素
溢出：隐藏；背景：# 999;
边距-顶部：150像素；位置：相对；
}
#pic_list {
位置：相对；
}
#pic_list li {
位置：绝对；可见性：隐藏；
}
#pic_list li.show {
可见性：可见；
}
#pic_list li img {
垂直对齐：居中；
}。按钮{
宽度：240像素高度：20px
行高：20px背景：# ccc
位置：绝对；底部：0px
}
#按钮{
浮动：对；
}
#按钮李{
浮动：左；宽度：20px高度：20px
文本对齐：居中；保证金：0 3px
字体系列：“Arial”；字体大小：12px
颜色：# fff背景：# 000;
}
#按钮李. current {
背景：# f00光标：指针；
}
/风格
/头
身体
div class='区域中部'
div id='imgbox' class='bbbb '
ul id='pic_list' class='aaaa '
李'显示id='一'
img src=' images/1317279971 _ 77011100。jpg ' width=' 240 '/
/李
李id='二'
img src=' images/1317279972 _ 01691900。jpg ' width=' 240 '/
/李
李id='三'
img src=' images/1317279973 _ 69082200。jpg ' width=' 240 '/
/李
李id='四'
img src=' images/1317281054 _ 38572100。jpg ' width=' 240 '/
/李
李id='五'
img src=' images/1317281056 _ 61630800。jpg ' width=' 240 '/
/李
/ul
/div
div class='button' class='dddd '
ul id='button' class='cccc '
Li class=' current ' id=' but _ one ' 1/Li
李id=' but _ two ' 2/李
李id=' but _ three ' 3/李
李id=' but _ four ' 4/李
李id=' but _ five ' 5/李
/ul
/div
/div
脚本类型='文本/javascript '
（函数(){
var imgbox=document。getelementbyid(' imgbox ')；
var pic _ list=document。getelementbyid(' pic _ list ')；
var pics=pic _ list。getelementsbytagname(' Li ')；
var button=文档。getelementbyid(“button”).getElementsByTagName(' Li ')；
var p；
定义变量启动；
函数自动播放(start){ for(I=start；ibutton.lengthi ){
//设置起始值为开始参数。
（函数(){
var p=I；
//为p赋值一。我等于0,1,2,3,4;
按钮[我].onmouseover=function change(){
//按钮[0],按钮[1],按钮[2],按钮[3],按钮[4]
//onmouseover可以触发函数；
for(j=0；JT这个。父节点。子节点。长度；j ){
//以这（当前触发事件的元素)为起点，的父节点的所有子节点
//的长度值为最高值，开始遍历。
this.parentNode.childNodes[j].类名=" "；
//以这（当前触发事件的元素)为起点
//的父节点的所有子节点的类名为空。危险慎用。
}
这个。class name=" current
//这个。即当前触发onmouseover的元素的类名为'当前；
for(m=0；mpics.lengthm ){
//以图片长度为最高值进行遍历。遍历图片。
图片[m]的缩写.类名=" "；
//清空所有生产信息控制系统数组中所有元素的类名；
if (m==p){
//当m=p(p==I)所以m=i时，触发下列函数
图片[m]的缩写.展示
//图片的第m个元素的类名值为展示；m在这里等于我；
}
}
}
})();
}
}
自动播放(0);
})();
/脚本
/body
/html
希望本文所述对大家的Java语言（一种计算机语言，尤用于创建网站）描述语言程序设计有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。