本文实例为大家分享了射流研究…实现简单轮播图效果的具体代码，可以实现左右翻转，图片切换显示等效果，供大家参考，具体内容如下

效果展示：

代码展示：

！doctype html html！-学习功能：使用Java脚本语言实现图片轮播，左右翻转，图片切换显示等作者丽莎于2018-5-30-title meta charset=' utf-8 '/title body div class=' maindiv ' style * { margin : 0px；padding: 0px }。施甸{宽度： 600像素重量： 300像素相对位置：} .施甸#施甸_ img { width : 100%；高度： 100%;} .施甸#施甸_ img Li {宽度： 100%；高度： 100%;绝对位置：left: 0pxtop: 0px}。施甸#施甸_ img img { width : 100%；高度： 100%;} .施甸#施甸_nav li {左侧浮动：宽度： 20pxheight : 20pxbackground : # ffffffborder : 1px # ffff00固体；左边距left: 10px文本对齐：中心；线高： 20px列表样式：无；} .施甸#施甸_导航{位置：绝对值；right: 10pxbottom: 10px}。施甸#施甸_导航.活动{ background : 0000 ffcolor :黑色；光标：指针；} .施甸img _ nav { position : absolutetop : 140 px宽度： 100% }。施甸img_nav .左cursor:指针；} .施甸img_nav .右cursor:指针；向右浮动：}/style div class=' shidian ' ul id=' shidian _ img ' onmouseover=' stop _ img()' onmouseout=' start _ img()' liimg src=' http :/image/1。jpg '/Li Li img src=' http :/image/3。jpg '/Li Li img src=' http :/image/2。jpg '/Li Li img src=' http :/image/4。jpg '/Li/ul ul id=' shidian _ nav ' Li class=' active ' on mouse over=' show _ img 1(this)；'1/Li Li class=' active ' on mouse over=' show _ img 1(this)；'2/Li Li class=' active ' on mouse over=' show _ img 1(this)；'3/Li Li class=' active ' on mouse over=' show _ img 1(this)；'4/Li/ul div class=' img _ nav ' span class=' left ' onclick=' left _ img()'/span span class=' right ' onclick=' right _ img()'/span/div/div脚本索引=0;imgs=文档。getelementbyid(' shidian _ img ').儿童；//获得图片节点navs=文档。getelementbyid(' shidian _ nav ').儿童；//获得右下图片导航的节点//下一张轮播图片函数next _ img(){ index；if(index=imgs。长度){ index=0；}显示_日志();} //正常显示图片函数show _ log(){ for(I=0；i imgs.lengthI){ imgs[I]。风格。显示='无'；imgs[i].class name=}//控制台。log(index)if(index=imgs。长度){ index=0；} imgs[索引]。风格。display=' blockimgs[索引]。className=' active}显示_日志();timer=setInterval(next_img，1000)；函数stop_img() { clearInterval(计时器);}函数start _ img(){ timer=setInterval(next _ img，1000)；} //随机切换显示图片函数show _ img 1(obj){ stop _ img()；index=getIndex(obj.parentNode，obj)；show _ log()；} //向左翻图片函数left _ img(){ stop _ img()；索引-;if(索引0)索引=imgs。长度-1；show _ log()；start _ img()；} //向右翻图片函数right _ img(){ stop _ img()；指数；if(索引imgs.length)索引=0;show _ log()；start _ img()；} //获得当前的节点函数getIndex(parent，obj){//console。日志。innerhtml)；e=家长。孩子；for(I=0；即长度；I){ if(e[I]==obj){ return I；} } } /script /div/body /html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。