整屏滚动
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js
函数节流
javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数,实现函数节流。
整屏滚动实例
幻灯片
也叫轮播图,是在网页中常见的一种表现形式
要明白,小圆点 1 2 3 并不是写死的,它是根据ul li中的图片张数来决定的 ,所以 我们要先把div中ol li中的代码去掉
动画部分包括:
1.鼠标经过第几个小圆点,就要展示第几张图片,并且小圆点的颜色也发生变化
2.图片自动轮播,(这需要一个定时器)
3.鼠标经过图片,图片停止自动播放(这需要清除定时器)
4.鼠标离开图片,图片继续自动轮播 (重新开始定时器)
网友评论