轮播图怎么放图java_[Java教程]图解js图片轮播

[Java教程]图解js图片轮播

0 2015-12-19 18:00:10

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

方案一：

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

方案二：

实现原理示意图

原理：

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

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

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

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

Demo－Code：1 2 3

4 5 图片轮播-v2 6 35 36 37

38

• 39
• 40
• 41
• 42
• 43

44

45 46 125 126

本文网址：http://www.shaoqun.com/a/170078.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0