如图所示:
想要的效果:
1.鼠标移入时文字变化、图片变化
2.鼠标不做动作,也会有自动变化
布局如下:
js代码如下:
实现思路:
鼠标动作时使用index()获取当前文字的位置,使用eq()定位到对应位置的图片
使用stop()清除动画队列
使用.eq(0).mouseover()初始化图片
使用setInterval()定时自动调用函数
鼠标动作之后为了避免图片仍然按照原顺序播放,因此对i重新赋了当前值
最后再讲一点提高性能的point吧,以下写法比上图好一点: