本文实例讲述了射流研究…实现头条新闻的经典轮播图效果。分享给大家供大家参考，具体如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，user-scalable=no，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title文档/title style * { margin 33600；划水：0;列表样式：无；} .盒子{宽度： 665像素宽度： 362像素宽度：固体；余量： 100像素自动；位置：相对；} .左{宽度： 50像素高度： 50pxborder:纯白色；边界半径： 50%;绝对位置：线高： 50px文本对齐：中心；font-size : 50px左：0 pxtop :180 pxcursor :指针；颜色：白色；} .右侧{宽度： 50像素高度： 50pxborder:纯白色；边界半径： 50%;绝对位置：线高： 50px文本对齐：中心；font-size : 50px右： 0pxtop : 180 pxcursor :指针；颜色：白色；} ul { width: 400px高度： 50px余量：307px 188px绝对位置：left :30 pxtop :24 px } Li { width : 30px heart : 30pxborder :固体1px白色；边界半径： 50%;向左浮动：光标：指针；线高： 30px文本对齐：中心；颜色：白色；} img { display:无宽度： 665像素；高度： 362px}。act { display:块；} .活动{ background : black }/style/head dydiv class=' box ' id=' box ' img src=' http : img/1。jpg ' alt=' class=' act ' img src=' http : img/2。jpg ' alt=' img src=' http : img/3。jpg ' alt=' img src=' http : img/4。jpg ' alt=' img src=' http :0 ' var arrImg=document。getelementsbytagname(' img ')；var oLeft=文档。getelementbyid(' left ')；var originht=文档。getelementbyid(' right ')；var oBox=document。getelementbyid(' box ')；var num=0；f=setInterval(abc，1000)；obox。onmouseover=function(){ clearInterval(f)} obox。onmouseout=function(){ f=setInterval(ABC，1000)；} for(x=0；xarrli . lendex){ arrLi[x].索引=x；arrLi[x].onmouseover=function(){ for(j=0；贾尔李。长度；j ){ arrLi[j].类名=arrImg[j].className=}此. className='活动阿里姆[this.index].{ act } } oleft .onclick=function(){ num=num-1；if(num 0){ num=arrimg。length-1 }表示(j=0；jarrImg.lengthj ){ arrImg[j].类名=arrLi[j].阿里姆[num].actarrLi[num].class name=' active } Oright . onclick=ABC函数ABC(){ num=num 1；if(NumMarymg。length-1){ num=0 }表示(j=0；jarrImg.lengthj ){ arrImg[j].类名=arrLi[j].阿里姆[num].actarrLi[num].className=' active} }/脚本/正文/html本机测试运行效果如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。