js图片轮播手动切换特效

先瞄一眼射流研究…图片轮播手动切换特效图：

代码：

html health eta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题无标题文档/title style * { padd :0 px；边距：0px} #内容{宽度：400像素高度：400 pxborder:10px固体# ccc位置：绝对；前：50%；左侧：50%;边距-top :-200 px；边距-左侧：-200像素；} #顶部，#底部{宽度：400像素高度：40 px背景技术： # 000;color: # fff过滤器(opa城市336080)；opacity:0.8文本对齐：居中；线高：40 px位置：绝对；} # top { top:0} #底部{ bottom:0}#prev，# next { position : absolutetop :50%；边距-top :-20px；宽度：40 px高度：40 px文本对齐：居中；线高：40 px文本装饰：无；背景技术： # 000;color : # ffffont-size :30 px；字体粗细：加粗；} # prev { left :10 px } # next { right :10 px } # img 1 { width :400 px高度：400 px} # tab { position:absolute宽度宽度：400像素高度：100 px边距-top :-90px；文本对齐：居中；} # info { margin-top :10 px；font-size :20 px} #选项卡输入{宽度：70像素高度：30 px}.活动{背景：黄色；}/style/head dydiv id=' content ' div id=' tab '输入id=' loopBtn ' type=' button ' value='循环切换/input id=' OrderBtn ' type=' button ' value='顺序切换/p id='info '图片顺序加载中./p /div p id='top '图片数量加载中./p a id=' prev ' href=' JAVAScript :/a a id=' next ' href=' JAVAScript :/a p id='底部'图片信息加载中./p img id=' img 1 '/divscriptwindow。onload=function(){ var top=$(' top ')、bottom=$('bottom ')、prev=$('prev ')、next=$('next ')、img=$('img1 ')、loopBtn=$('loopBtn ')、orderBtn=$('orderBtn ')、info=$('info ')、tab=$(' tab ')；//切换图片顺序的按钮var btns=选项卡。getelementsbytagname(' input ')；//第几张图片var num=0；//图片url var picSrc=['img/1.jpg '，' img/2.jpg '，' img/3.jpg '，' img/4。jpg ']；//图片的数量picSrc.length//图片信息var picInfo=['高冷美女','终结者','性感美女','妖娆美女'];//循环方式var LoopMethod=1；//1,循环切换；0,顺序切换//循环信息var loopInfo=['图片可以从最后一张转到第一种切换','图片只能切换到最后一张或者第一张'];change pic()；//循环切换loopbtn。onclick=function(){ LoopMethod=1；变更单()；} //顺序切换点BTN。onclick=function(){ LoopMethod=0；变更单()；} //上一张prev。onclick=function(){ num-；//1,循环切换；0,顺序切换if(LoopMethod){ if(num==-1)num=picLen-1；change pic()；} else { if(num===-1){ num=0；警报('已经是第一张图片啦！');}更改pic()；} } //下一张下一个。onclick=function(){ num；//1,循环切换；0,顺序切换if(LoopMethod){ if(num===PiClen)num=0；change pic()；} else { if(num===picLen){ num=picLen-1；警报('已经是最后一张图片啦！');}更改pic()；} } //切换顺序函数changeOrder () { //情况按钮的高亮for (var i=0，len=btns.length我透镜；i ) { btns[i].className=} //循环切换1,循环；0,顺序信息。inner html=LoopInfo[1-LoopMethod]；loopMethod===1？loopbtn。class name=' active ' :订购BTN。类名=' active} //切换图片函数变更pic(){变更单()；顶部。inner html=num 1 '/' PiClen；底部。inner html=PiCinfo[num]；img。src=PiCsrc[num]；} //id选择器函数$(id){返回文档。getelementbyid(id)；} }/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。