图解射流研究…图片轮播效果

本文实例讲解了射流研究…图片轮播效果的实现原理，分享给大家供大家参考，具体内容如下

两种图片轮播实现方案，先来看效果对比：

方案一：

原理：将图片摆成一行，从左到右依次滚动进入视野，当滚动到最后一张时，从右到左滚动回到第一张。这么做的缺点是，滚动到最后一张时，会有一个反向，导致整个滚动过程不连贯。

方案二：

实现原理示意图

原理：

1.轮播过程中，有几个关键元素：一个舞台（绿框)、候场区（黑框)、排队区（红框)和两个数组A和甲用来保存正在展示和下一个将要展示的图片，如：图片1、2;B用来保存排队等候出场的图片，如图片5、4、3。

2.每一步轮播时，要做的事情如下：

A要做的事情是把它的第一个元素向左移走，把第二个元素向左移进展示区域；然后把刚才的第一个元素从A中变化出去，并接合进B的第一个位置上。

B要做的事情是把它的最后一个元素，移到候场区（即目前图2所在的位置)等候；然后把刚才的最后一个元素从B中流行音乐出去，并推到A中。

代码：

！DOCTYPE html html head meta charset=' utf-8 '标题图片轮播-v2/标题样式ul { margin : 0；padd : 0；列表样式：无；} .幻灯片{宽度： 200像素重量： 112像素飞越：隐藏；margin: 0 auto}。sliderWrap ul {相对位置：宽度： 1000像素；左转：5s轻松；左： 0；} .sliderWrap li{位置：相对；向左浮动：} .滑盖说唱ul Li img {宽度： 100%；}/style/head dydiv class=' sliderWrap ' ul id=' slider ' liimg src=' http : images/slider/slider 1。jpg ' alt=' '/Li Li img src=' http : images/slider/slider 2。jpg ' alt=' '/Li Li img src=' http : images/slider/slider 3。jpg ' alt=' '/Li Li img src=' http : images/slider/slider 4。jpg .图片轮播* @ type { Element } */var BTN=document。getelementbyid(' next ')；var DOM=文档。getelementbyid('滑块')；var骗子=DOM。getelementsbytagname(' Li ')；var cur width=200 var ulWidth=cur width *骗子。长度；var show=[]；var circle=[]；var goAway=' translate(-' curWidth ' px，0)translate ez(0px)'；var GoN=' translate(0，0)translate ez(0px)'；var goPre=' translate(' CurWidth ' px，0)translate ez(0px)'；//保证所有里在保险商实验所中能在一行内放下多姆。风格。width=ULwidth ' pxfor(var i=0，len=liArr.length我透镜；I){ var Curli=骗子[I]；curLi.setAttribute('data-index '，I)；寇利。风格。width=curWidth ' pxif(I==0){ Curli。风格。left=0；展示。push(Curli)；} else { Curli。风格。left=-CurWidth * I ' px '；if(I ^ 1){ translate(Curli，goAway，')圈。push(Curli)；} else { show。push(Curli)；翻译(curLi，goPre，')；} } }圈。反向()；btn.onclick=function(){ //已展示的图片滚粗var先显示=显示。shift()；翻译(showFirst，goAway，' 300 ms ')；//正在展示的图片翻译（显示[0]，goIn，‘300 ms’；circle.splice(0，0，先显示)；//准备好下一个将要展示的图片var nextPre=圆。pop()；翻译(nextPre，goPre，' 0ms ')；展示。push(next pre)；};函数翻译(dom，goType，time){ DOM。风格。transform=DOM。风格。webkittransform=DOM。风格。moztransform=DOM。风格。mstransform=DOM。风格。otransform=GoType多姆。风格。transitionduration=DOM。风格。webkittransactionduration=DOM。风格。mozztransitionduration=DOM。风格。mstransitionduration=DOM。otransationduration=时间；}/脚本/正文/html精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播

以上就是射流研究…图片轮播效果的实现原理以及详细代码，希望对大家学习爪哇岛描述语言程序设计有所帮助。