功能实现思路

模拟弹框 模拟滚动条 banner的插件

模拟弹框

就是按照三种confirm、alert、prompt弹框 模拟窗口,实现类似的效果,把具体的可变的实现封装起来,具体的可以看阿当的视频,讲的很好。

模拟滚动条

定义2个div

外层是上下滚动的长条,中间是用户拖动的,然后监听鼠标事件和滚动事件分别是(mousewheel,兼容火狐DOMMouseScroll),然后移动时改变div(top)或者改变浏览器scrollTop值 实现滚动的效果

banner的插件

具体滚动可以参照Jquery的animate方法,我们要实现的是无缝滚动,很多banner到达最后一张的适合往往会页面翻转到第一张,这很不科学,我们只需要复制节点将 比如

<ul><li>第一张</li><li>第二张</li><li>第三张</li></ul> 

我们将第三个节点插到第一个节点前面将第一个节点插入到第三个节点后面,具体顺序自己考虑实现后的效果

<ul>
    <li>第三张</li>
    <li>第一张</li>
    <li>第二张</li>
    <li>第三张</li>
    <li>第一张</li> 

</ul>

在到达第三张的时候,向后翻到第四张然后animate事件回调将UL的位置放到第一张的位置
原文地址:https://www.cnblogs.com/kitebear/p/4612249.html