轮播图(Rotation chart)

轮播图的原理:

a、图片移动实现原理:利用浮动将所有所有照片依次排成一行,给这一长串图片添加一个父级的遮罩,每次只显示一张图,其余的都隐藏起来。对图片添加绝对定位,通过控制left属性,实现照片的移动。

b、图片移动动画原理:从a位置移动到b位置,需要先计算两点之间的差值,通过差值和时间间隔,计算出每次移动的步长,通过添加定时器,每次移动相同的步长,实现动画效果。

c、图片定位停止原理:每一张照片都有相同的宽度,每张照片都有一个绝对的定位数值,通过检测定每次移动后,照片当前位置和需要到达位置之间的距离是否小于步长,如果小于,说明已经移动到位,可以将定时器清除,来停止动画。

d、图片切换原理:在全局设置一个变量,记录当前图片的位置,每次切换或跳转时,只需要将数值修改,并调用图片页数转像素位置函数,再调用像素运动函数即可。

e、自动轮播原理:设置定时器,一定时间间隔后,将照片标记加1,然后开始切换。

f、左右点击切换原理:修改当前位置标记,开始切换。这里需要注意与自动轮播之间的冲突。当点击事件触发之后,停止自动轮播计时器,开始切换。当动画结束后再次添加自动轮播计时器。

g、无缝衔接原理:需要无缝衔接,难度在于最后一页向后翻到第一页,和第一页向前翻到最后一页。由于图片的基本移动原理。要想实现无缝衔接,两张图片就必须紧贴在一起。所以在第一张的前面需要添加最后一张,最后一张的后面需要添加第一张。

h、小圆点的位置显示原理:每次触发动画时,通过全局变量标记,获取当前页数,操作清除所有小圆点,然后指定一页添加样式。

i、点击触发跳转的原理:类似于左右点击触发,只是这是将全局页面标记,直接修改,后执行动画。需要避免与自动轮播定时器的冲突。

js内容如下

<script> var time=5000; let content = document.querySelector(‘.banner-imgBox2’); let switchBtn = document.querySelector(‘.banner-imgBox-div’); switchBtn.children[0].classList.add(‘on2’); let index=0; let x=0; function marginLeft(right) { if(right){ switchBtn.children[index].classList.remove(‘on2’); if(index==switchBtn.children.length-1){ index=0; content.innerHTML+=content.innerHTML; x++; }else { index++; x++; } switchBtn.children[index].classList.add(‘on2’); content.style.marginLeft=x*-1895+”px” }else{ switchBtn.children[index].classList.remove(‘on2’); if(index==0){ index=switchBtn.children.length-1; if(x==0){ x=0 }else{ x–; } }else { index–; x–; } switchBtn.children[index].classList.add(‘on2’); content.style.marginLeft=x*-1895+”px” }

}

var interval = setInterval(() => { marginLeft(true) }, time);

let container = document.querySelector(‘.banner-imgBox’); // 鼠标经过时清除定时器 container.onmouseover = function () { clearInterval(interval); } // 鼠标移开时设置定时器 container.onmouseout = function () { // 先清除定时器 clearInterval(interval); // 往右滑动并开启定时器 // marginLeft(true) interval = setInterval(() => { marginLeft(true) }, time); }</script>

————————

Principle of rotation chart:

a. Implementation principle of picture movement: all photos are arranged in a row by floating, and a parent mask is added to this long series of pictures. Only one picture is displayed at a time, and the rest are hidden. Add absolute positioning to the picture, and realize the movement of the picture by controlling the left attribute.

b. Principle of picture moving Animation: when moving from position a to position B, you need to calculate the difference between two points first, calculate the step size of each movement through the difference and time interval, and add a timer to move the same step size each time to achieve the animation effect.

c. Picture positioning stop principle: each photo has the same width, and each photo has an absolute positioning value. After each movement, check whether the distance between the current position of the photo and the position to be reached is less than the step size. If less than, it indicates that it has moved in place, and the timer can be cleared to stop the animation.

d. Picture switching principle: set a variable globally to record the position of the current picture. Each time you switch or jump, you only need to modify the value, call the picture page number to pixel position function, and then call the pixel motion function.

e. Automatic rotation principle: set the timer. After a certain time interval, add 1 to the photo mark, and then start switching.

f. Left and right click switching principle: modify the current position mark to start switching. Here, we need to pay attention to the conflict with automatic rotation. When the click event is triggered, stop the automatic rotation timer and start switching. When the animation is over, add an automatic rotation timer again.

g. Seamless connection principle: seamless connection is required. The difficulty lies in turning the last page back to the first page and turning the first page forward to the last page. Because of the basic movement principle of the picture. To achieve seamless connection, the two pictures must be close together. Therefore, you need to add the last one before the first one, and the first one after the last one.

h. Position display principle of small dots: each time the animation is triggered, obtain the current number of pages through the global variable mark, clear all small dots, and then specify a page to add style.

i. The principle of click trigger jump: it is similar to left and right click trigger, but it marks the global page, modifies it directly, and then executes the animation. Conflicts with the automatic rotation timer need to be avoided.

JS contents are as follows

<script> var time=5000; let content = document.querySelector(‘.banner-imgBox2’); let switchBtn = document.querySelector(‘.banner-imgBox-div’); switchBtn.children[0].classList.add(‘on2’); let index=0; let x=0; function marginLeft(right) { if(right){ switchBtn.children[index].classList.remove(‘on2’); if(index==switchBtn.children.length-1){ index=0; content.innerHTML+=content.innerHTML; x++; }else { index++; x++; } switchBtn.children[index].classList.add(‘on2’); content.style.marginLeft=x*-1895+”px” }else{ switchBtn.children[index].classList.remove(‘on2’); if(index==0){ index=switchBtn.children.length-1; if(x==0){ x=0 }else{ x–; } }else { index–; x–; } switchBtn.children[index].classList.add(‘on2’); content.style.marginLeft=x*-1895+”px” }

}

var interval = setInterval(() => { marginLeft(true) }, time);

let container = document.querySelector(‘.banner-imgBox’); // 鼠标经过时清除定时器 container.onmouseover = function () { clearInterval(interval); } // 鼠标移开时设置定时器 container.onmouseout = function () { // 先清除定时器 clearInterval(interval); // 往右滑动并开启定时器 // marginLeft(true) interval = setInterval(() => { marginLeft(true) }, time); }</script>