美文网首页
呼吸轮播图心得

呼吸轮播图心得

作者: 这就是小七de简书 | 来源:发表于2017-10-10 20:05 被阅读0次

    思路:

    1.点击按钮,改变显示的图片。同时改变对应小圆点的颜色。

    2.点击小圆点,改变小圆点颜色,显示对应的图片。

    3.鼠标移入图片内,轮播图停止,鼠标移出则恢复。

    难点:

    1.快速点击按钮,如何实现图片播放完成后在进行下一张图片的播放(解决方法:函数截流。判断该图片是否正在播放,如果为真则停止后续函数的执行。如:if (imgLi[a].isaimate) return)。

    2.如何实现图片自动播放时时,小圆点同步改变(解决方法:排他模型)。

    个人容易忘记的地方。

    for (i = 0; i < circlesLi.length; i++)

    {

    ###一定要记得先编号!!!

    circlesLi[i].index = i;

    circlesLi[i].onclick = function(){

    if (imgLi[a].isaimate) return;

    animate(imgLi[a], {"opacity": 0}, 700)

    a = this.index;

    animate(imgLi[a], {"opacity": 1}, 700)

    changeCircles();

    }

    }

    相关文章

      网友评论

          本文标题:呼吸轮播图心得

          本文链接:https://www.haomeiwen.com/subject/lxeuyxtx.html