轮播图的制作思路
轮播图分为三个部分一个是自动轮播 一个是点击原点切换 一个是点击左右方向键切换图片 因为三个效果都需要用到图片的切换 所以把图片切换封装在一个函数 方便调用 定义全局变量index的意义 是为了每个函数不用重新声明index 而且省去传参 图片切换的思想 遍历图片的节点 把每个图片都设置成隐藏 然后图片集合中指点的图片也就是索引为index的图片设置为显示。
自动轮播中的index是一个0 1 2顺序自动循环的值 自加后超出图片集合长度就自动变回0 重新开始 timer是存放setInterval的返回值 用于取消定时器作用 这个定时器由onmouseout的事件使用 onmouseover事件时取消定时器 然后直接调用一次轮播的函数形成进入页面就开始轮播
点击切换 主要是把点击当前的原点的索引值找到 就要设置属性把这个属性的属性设置为i 然后循环的时候 这个属性的值永远对应自己的索引 把这个属性值赋值给index就找到了点击对应的索引值 触发当前点击事件的节点用this来获取
左右切换 就是把index的循环方向改变一下 点击后以 0 1 2的方向去传递index的值就是右侧的切换
0 2 1倒的方向就是左侧的切换 然后每次点击触发函数就可以制作成功了
老师 这个大体的思路是不是这样啊
正在回答
你好，大体是这样的，不过，你这已经不叫思路的，把方法也总结了，挺好的。还有点(1)自动轮播中的index是一个0 1 2顺序;
这里不能说是0 1 2若4或者5或者更多张图片呢，所以建议：获取长度然后长度减一；
(2)就要设置属性把这个属性的属性设置为i;
这里应该是要说设置属性值为i吧
建议：最好能够动手操作下，实现下代码，这样记忆会更加深刻。
祝学习愉快~
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星