zoukankan      html  css  js  c++  java
  • jQuery实现图片轮播

    如图所示:

    想要的效果:

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

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

    布局如下:

    js代码如下:

    实现思路:

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

    使用stop()清除动画队列

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

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

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

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

  • 相关阅读:
    Alpha版(内部测试版)发布
    冲刺2-3
    冲刺2-2
    冲刺2-1
    团队绩效评价
    改进方案
    意见汇总
    27组评价
    冲刺10
    SOA
  • 原文地址:https://www.cnblogs.com/wangchufang/p/8431808.html
Copyright © 2011-2022 走看看