• 技术文章 >web前端 >js教程

    JS实现淘宝幻灯片效果的实现方法_javascript技巧

    2016-05-16 17:39:33原创795
    实现思路:

    1、for循环给数字按钮加上点击事件。

    2.for循环先把按钮的样式清空,再把当前样式设置样式。

    3、给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应,用运动框架把大图的UL每次移动-150px,因为图片高度是150px。如果移动到第n张图片就是-150*n。

    4、定义变量now,用来自动播放用的。把当前图片赋值给now now=this.index。

    5、定义自动播放函数。now++ 下一张,if判断,到最后一张图片的时候就把now设置为0,就是第一张。 if(now==aBtn.length)

    6、定义定时器,每2秒就调用一次自动播放函数。

    7、鼠标指向图片时就清除定时器。

    8、鼠标离开图片时就开启定时器。

    复制代码 代码如下:


    完整代码:

    复制代码 代码如下:





    淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂









    1. 1

    2. 2

    3. 3

    4. 4

    5. 5



    • 广告一

    • 广告二

    • 广告三

    • 广告四

    • 广告五





    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:JS 幻灯片 效果
    上一篇:JS模块与命名空间的介绍_javascript技巧 下一篇:jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)_jquery
    PHP编程就业班

    相关文章推荐

    • es6怎么判断数组是否含有相同的值• es6中怎么将set转化为数组• 实例图文详解在JavaScript中实现队列• es6怎么判断数组中是否包含某一项值• 手把手教你在node中怎么优雅打印全链路日志

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网