JS实现的画面选择顺序切换和循环切换功能示例[测试可用]

本文给出了一个用JS实现画面选择顺序和周期切换的例子。分享给大家参考，如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title图片切换/title style type=' text/CSS ' # box { width :400 px；margin :0 auto } # box div { text-align : center；margin:10px汽车；显示器：块；} # box divinput { margin-left : 5px；边界半径： 3pxborder:1px固体# CCC } # boxp { text-align : center；} #内容{宽度：400像素高度：400 pxmargin:0汽车相对位置：border:10px固体# ccc} #内容a { width:40px高度：40 px背景技术： # 000;border:5px实心# fff绝对位置：top:175px文本对齐：中心；文本装饰：无；线高： 40pxcolor : # CCC font-weight : 900；滤镜： alpha(opa city 336040)；opacity: 0.4 } #内容a :悬停{过滤器： alpha(opa city 336090)；opa city 3360 0.9 } # prev { left :10 px } # next { right :10 px } # text，# span { position : absolutebotom : 0 0；左转：0宽度宽度：400像素高度：30 px背景技术： # 000;线高： 30px文本对齐：中心；color : # ffffilter : alpha(opa city 336080)；opa city 3360 0.8 } # text { margin 33600 bottom : 0；} # span { top :0 } # img { width :400 px高度：400 px}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var oPrev=document。getelementbyid(' prev ')；var oNext=文档。getelementbyid(' next ')；var oText=文档。getelementbyid(' text ')；var oSpan=文档。getelementbyid(' span ')；var oImg=文档。getelementbyid(' img ')；var obt n1=文档。getelementbyid(' BTN 1 ')；var obt N2=文档。getelementbyid(' BTN 2 ')；var oP1=文档。getelementbyid(' P1 ')；var arrUrl=['images/1.jpg '，' images/2.jpg '，' images/3.jpg '，' images/4。jpg ']；var arrText=['baby '，'冰冰','唐嫣','杨幂'];var num=0；//初始化函数fnTab(){ OspAN。innerHTMl=num 1 '/arrText。长度；otext。inner html=arr text[num]；奥姆。src=ArrURl[num]；};fnTab()；obt n1。onclick=function(){ Onext。onclick=function(){ num；if(num==ArrText。长度){ num=0；} fnTab()；};奥普列夫。onclick=function(){ num-；if(num==-1){ num=arrtext。长度-1；} fnTab()；};/* Oprev。onclick=function(){ if(0 num){ num-；fnTab()；} else { num=ArrText . length num-；} };*/};obtn 2。onclick=function(){ Op1。innerHTMl='图片只能到最后一张或第一张切换；下一个。onclick=function(){ if(num==arr text。长度-1){ alert('这是最后一张了。');} else { num}/* if(num==arrtext。长度){ alert('这是最后一张了。');} */fnTab()；};奥普列夫。onclick=function(){ if(num==0){ alert('这已经是第一张了，不能再切换了。');} else { num-；} fnTab()；};};/* onext。onclick=function(){ num；if(num==ArrText。长度){ num=0；} fnTab()；};奥普列夫。onclick=function(){ num-；if(num==-1){ num=arrtext。长度-1；} fnTab()；};*/};/script/headbody div id='box' div输入id='btn1' type='button' value='循环切换输入id='btn2 '类型='按钮'值='顺序切换/div p id='p1 '图片可以从最后一张跳到第一张循环切换/p/div div id=' content ' a href=' JAVAScript :'rel='外部无跟随' rel='外部无跟随' id=' prev '/a href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' id=' next '/a p id=' text '图片文字加载中./p span id='span '数量正在计算中./span img id=' img '/div/body/html这是我使用射流研究…做的图片切换，可以选择顺序切换也可以选择循环切换顺序切换到最后一张会有提示。

本机测试运行效果如下：

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

希望本文对JavaScript编程有所帮助。