本文实例讲述了射流研究…实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下：

这里使用射流研究…制作简易图片轮播效果：

制作比较粗糙，使用的图片是宽度：660ppx，高度：550像素

效果图如下：

代码部分如下：

！DOCTYPE html html lang=' en ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titleJS幻灯代码/title脚本类型=' text/JavaScript '窗口。onload=function(){ flag=0；obj1=document.getElementById('滑块');obj 2=文档。getelementsbytagname(' Li ')；obj 2[0]。风格。背景颜色=' # 666666 '；//默认被选中颜色time=setInterval(' turn()；', 5000);目标1。onmouseover=function(){ clearInterval(time)；} obj 1。onmouseout=function(){ time=SetInterval(' turn()；', 6000);} for(var num=0；num obj 2。长度；num ) { obj2[num].onmouseover=function(){ turn(this。innerhtml)；clearInterval(时间);} obj2[num].onmouseout=function(){ time=setInterval(' turn()；', 6000);} } //延迟加载图片，演示的时候，使用本地图片//上线后请改为二级域名提供的图片地址文件。getelementbyid('秒').src=' images/2。png '；//使用图片宽660,高550 document.getElementById('第三')。src=' images/3。png '；document.getElementById('四').src=' images/4。png '；}函数转（值){ if(值！=null){ flag=value-2；}如果(标志obj2.length - 1)标志；其他标志=0;目标1。风格。top=标志*(550)“px”；for(var j=0；j obj2。长度；j){ obj 2[j]。风格。背景颜色=' # ffffff} obj 2[flag]。风格。背景颜色=' # 666666 '；}/脚本样式类型=' text/CSS ' # wrap { height : 550 px；宽度： 660像素；飞越：隐藏；相对位置：飞越：隐藏；} # wrap ul { list-style :无；绝对位置：top: 500pxleft: 450px} #换行李{左边距：2 pxopa city 3360 . 3 filter : alpha(不透明度=30);文本对齐：中心；线高： 30pxfont-size : 20px高度： 30px宽度： 30px背景-color : # fff；向左浮动：边界半径：3 px光标：指针指针；} #滑块{ position : absolutetop : 0pxleft 3360 0px } # slider img { float : left border :无；}/style/head body div id=' wrap ' div id=' slider ' a target=' _ blank ' href=' # ' img src=' http : images/1。png '/a target=' _ blank ' href=' # ' img id=' second '/a target=' _ blank ' href=' # ' img id=' four '/a/div ul li1/Li Li希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。