这是前天刚接触这个行业的朋友问的问题。我也在网上查了一些，看了代码不喜欢。因此
我做了这个小演示。我自己；希望你能从中吸取教训。
首先是页面布局:最重要的是为包装器类设置position:relative；溢出:隐藏；
类项设置位置:绝对等属性；
接下来，分析如何旋转:
我的想法是:当你点击下一页:动画的项目移动到左边。
动画({ “***rginLfet & # 8221:”-800像素”}，1000，function(){ })；在函数({})中执行的方法:
首先将item-1放入$(”。李”)，然后是items({***rginLeft:0})
【我一开始在想，把item-1加到$(”。李”)最后一个之后，要不要先去掉item-1？
然后我观察了下一页方法执行后的页面元素，才发现这个担心是多余的]
以下是执行下一页后的页面元素:
[你有没有发现，第一个li元素跑到后面，然后当你点击上一页的时候，我们只需要拿最后一个li元素]
想法:当你点击上一页时，项目的css向左移动({ “***rginLfet & # 8221:0})，然后是$(”。李”).eq(3)放在items的第一个位置，然后aniamte({ “***rginLeft & # 8221:0},1000);
这个时候，让我们下定决心:items的css向左移动({ “***rginLfet & # 8221:0})和$(”。李”).eq(3)【即item-1】放在items的第一个位置瞬间完成，人眼不可见；因此，aniamte({ “***rginLeft & # 8221:0}，1000)，我发现item-1慢慢从左侧出来。
Js代码如下:
接下来是定时器:自动转盘。
【timer一定去做下判断，不然会导致连续点击的时候，图片移动会越来越快】【计时器必须做出判断，否则会导致连续点击时图像移动越来越快】
还有最后一个setTimeout:当点击下一页的时候，我会把计时器清零，所以我会把它加入到它的事件中，然后三秒钟之后，我会执行show()自动旋转；
最后一次点击事件:
整体页面展示:
本文来自胸大无脑是一种心态投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/482800.html
微信扫一扫 
