-
getElementsByClassName返回的是一个数组，要指定下标，所以next，prev指定Id属性，添加onclick事件，才能获取style.left查看全部
-
圆点按钮切换 ①通过for循环便利圆点，添加点击事件 ②点击按钮时，取到index值，就可以知道当前点击的是第几个按钮，要显示第几张图片 ③通过DOM2级方法getAttribute获取到自定义（或自带）属性，为了计算再转换为数字 ④通过新的值减去旧的值获取偏移量 ⑤写一个判断，当这张图片是打开状态的，就什么都不做，用class=on来判断是否打开，return跳出，后面的代码不会再执行查看全部
-
无限滚动：弥补左右键切换的空白 ①当前面的附属图比第一张大，最后一张附属图比最后一张小的时候，出现这两种情况时让它复位到真正的第一张或第五张图 ②判断是否滚到了辅助图上，滚到了让它归位 ③把常用的list.style.left，存到一个变量中，方便使用 ④添加圆点的切换功能，创建一个变量来承载当前存储的第几张图片/显示第个圆点 ⑤写一个函数，用来显示亮起小圆点的功能 ⑥圆点是数组，所以创建的变量要减去1才能对应上要显示的圆点，让它亮起来添加class名（样式） ⑦再绑定事件中左箭头index要加一，右箭头要减一，调用圆点函数让它点击时显示，每次点击箭头的时候都要改变index的值，使它对应到正确的图片上，调用showButton亮起对应的圆点 ⑧亮起自己的同时，让其他不亮，使用for循环，去掉所有的class，然后break退出循环，不再继续便利元素节点 ⑨箭头点击时，当圆点index大于5时，让它归位为1，小于1时，归位为5，不到5时加一查看全部
-
JS实现箭头切换 ①整个页面加载完成后window.onload，获取元素，这样才能真正的获取元素 ②通过ID名获取页面中的元素（最大容器、承载图片容器、圆点列表、箭头），赋值给一个变量 ③添加一个时间绑定，点击箭头时实现图片的切换 ④当点击右箭头时，改变left的值，它要像左移动，所以要减去一张图的宽度 ⑤获取图片容器的值，list.style.left = 自身的值再减去一张图片的宽度，注意要将等号后面字符串使用parseInt转换为数字才可以进行减法，减去的图片宽度要加px单位 ⑥反方向同样，但是注意是相反的，要加上一张图片的宽度 ⑦左右箭头的写法很相似，只是加减不一样，可以封装成一个函数，通过参数的正负值实现加减查看全部
-
样式布局关键代码讲解： ①父容器：承载图片、圆点下标、左右切换箭头，要让超出本分隐藏overflow：hidden、定位relative ②承载图片的div要添加定位：absolute让它基于父容器relative，z-index为1 ③圆点下标和左右切换箭头的z-index为2，position也为absolute，让其覆盖在图片上 ④左右切换箭头一开始设置隐藏display：none，鼠标移上时让其显示，给外层hover：图片容器display：block，让图片移动到外层容器时显示箭头，改变透明度RGBA ⑤给图片容器设置行内style：left值，让它显示第一张图，注意：因为有开始和结束位置分别有一张附属图片，所以要注意left的值，让它显示第一张图片查看全部
-
①焦点轮播图所用技能点： DOM操作、定时器、事件运用、JS动画、函数递归、无限滚动 ②包含图片的父级标签 要有一个属性：overflow:hidden 来隐藏超出自身尺寸的内容 ③为了实现轮播效果，要在开始和结束位置添加两张相同的附属图查看全部
-
parseInt把字符串转换成数字查看全部
-
快速点击时，会出现小圆点和图片不对应的情况，解决方案是当图片处于动画状态时，直接屏蔽掉点击事件 next.onclick = function(){ if(animated){return;} else{ if(index == 1){ index = 5; } else{ index -= 1; } animate(-600); return false; } }查看全部
-
在圆点切换的时候 next.onclick = function () { index += 1; index = index > 5 ? 1 : index; showButton(); animate(-600); } prev.onclick = function () { index -= 1; index = index < 1 ? 5 : index; showButton() animate(-600);查看全部
-
点击左右键时，小圆点随之亮起查看全部
-
提示小圆点亮起查看全部
-
js无限循环轮播查看全部
-
上一页和下一页点击切换轮播图查看全部
-
焦点图轮播物资 所用到的技能点： DOM 定时器 事件运用 JS动画 函数递归 无限滚动 包含图片和操作栏的父级标签 要有一个属性：overflow:hidden 来隐藏超出自身尺寸的内容 然后再为列表中的图片加一个LEFT的值 如-1200查看全部
-
图片轮播所用技能： DOM操作； 定时器； 事件； JS动画； 函数递归；查看全部
举报
0/150
提交
取消