为了账号安全,请及时绑定邮箱和手机立即绑定

焦点图轮播特效

难度初级
时长 1小时 1分
学习人数
综合评分9.73
263人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.6 逻辑清晰
  • next.onclick = function(){ //右键头 list.style.left=parseInt(list.style.left)-600+"px"; } prev.onclick = function(){ //左键头 list.style.left=parseInt(list.style.left)+600+"px"; } 另一种简洁的写法: function animate(offset){ list.style.left=parseInt(list.style.left)+offset+"px"; } next.onclick=function(){animate(-600)} prev.onclick=function(){animate(600)}
    查看全部
    0 采集 收起 来源:箭头切换

    2018-03-22

  • parseInt()把字符串转成数字
    查看全部
    0 采集 收起 来源:箭头切换

    2016-09-17

  • clearInterval可以清楚定时器
    查看全部
    0 采集 收起 来源:自动播放

    2016-09-14

  • 轮播图
    查看全部
    0 采集 收起 来源:原理介绍

    2016-09-12

  • 轮播图
    查看全部
    0 采集 收起 来源:原理介绍

    2016-09-12

  • setTimeout函数只执行一次;
    查看全部
    0 采集 收起 来源:动画函数

    2016-09-10

  • DOM二级方法:getAttrbute('')可以获取自定义的属性; parseInt()转换为数字;
    查看全部
    0 采集 收起 来源:按钮切换

    2016-09-10

  • 先获取各个标签以及元素,再设置箭头的位移切换。
    查看全部
    0 采集 收起 来源:箭头切换

    2016-09-10

  • 自定义属性不能通过点击来获得,可以用getAttribute,例如。图片
    查看全部
    0 采集 收起 来源:按钮切换

    2016-09-01

  • 这是一种回调函数的使用方式,如果stop(),这是stop方法就被执行了,但是如果写方法名stop,是事件触发时才会调用stop方法
    查看全部
    0 采集 收起 来源:自动播放

    2016-08-28

  • 存在一个bug,就是如果鼠标不移进去不会开始轮播的。在onload里面也要加上paly();
    查看全部
    0 采集 收起 来源:自动播放

    2016-08-28

  • 动画这部分在CSS部分加入transition即可,不用老师的GO函数也可以哦,下面是我的代码。 CSS部分: #list{ width:3600px; position:absolute; transition:left 2s; -moz-transition:left 2s; /* Firefox 4 */ -webkit-transition:left 2s; /* Safari and Chrome */ -o-transition:left 2s; /* Opera */ }
    查看全部
    3 采集 收起 来源:动画函数

    2016-08-28

  • animate = false; 当动画执行的时候的让animate==true; 当动画结束的时候的让animate==false; 这样就可以让让动画执行完后,在执行吓一条动画; if(animate==flase){ //判断animate是否等于false;是就执行 animat(800) }
    查看全部
    1 采集 收起 来源:动画函数

    2016-08-09

  • 轮播样式代码
    查看全部
  • 如果我们以list.style.left作为参照的话,切换的代码可以这样: //按钮切换 for (var i = 0, length = buttons.length; i < length; i++) { buttons[i].onclick = function (i) { var index = this.getAttribute('index'); list.style.left = index * (-600) + 'px'; setButtonClass(parseInt(list.style.left)); } } 总体的代码都会简单很多
    查看全部
    0 采集 收起 来源:按钮切换

    2018-03-22

举报

0/150
提交
取消
课程须知
您需要有HTML,CSS经验,能使用CSS制作静态页面,并对JS基础知识有一定的了解
老师告诉你能学到什么?
您将能掌握非常实用的焦点图轮播特效的制作过程。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!