如图所示:

想要的效果:

1.鼠标移入时文字变化、图片变化

2.鼠标不做动作,也会有自动变化

布局如下:

js代码如下:

实现思路:

鼠标动作时使用index()获取当前文字的位置,使用eq()定位到对应位置的图片

使用stop()清除动画队列

使用.eq(0).mouseover()初始化图片

使用setInterval()定时自动调用函数

鼠标动作之后为了避免图片仍然按照原顺序播放,因此对i重新赋了当前值

最后再讲一点提高性能的point吧,以下写法比上图好一点:

posted on 2018-02-08 15:39  鹿大大  阅读(114)  评论(0编辑  收藏  举报