博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
常见js特效的思路
阅读量:6083 次
发布时间:2019-06-20

本文共 451 字,大约阅读时间需要 1 分钟。

1.焦点轮播路

1.布局:父容器用overflow:hidden隐藏多余的图片

2:通过ID获取到重要的元素(父容器、图片列表、左右切换按钮等)
给左右按钮加上点击事件,通过JS更新图片的位置,判断边界值,比如已经到了第一张或者最后一张图,要以防出现空白。
3.如果下方有小圆点:加一个索引变量,如果显示的是当前图片,当前小圆点高亮,更新索引值
给小圆点加上点击事件:通过小圆点的索引来判断当前点击的是哪一个原点,再更新当前圆点对应的图片的位置偏移量,再高亮当前小圆点
优化:已经是当前图片的时候再点击小圆点,可以不执行多余的操做(比如再跑一趟位置更新函数),可以直接判断当前小圆点是否有高亮样式,如果是高亮,维持当前状态,如果不是,再更新。
4.给图片左右移动的时候加上滑动效果
5.给轮播图加上自动切换的效果,通过一个定时器(鼠标不在图片上的时候),在设定一个清除定时器(当鼠标移上图片的时候触发)

转载于:https://www.cnblogs.com/Yfling/p/6730453.html

你可能感兴趣的文章
【Visual C++】游戏开发笔记十六 讲解一个完整的回合制游戏demo
查看>>
我的友情链接
查看>>
汇编语言总结
查看>>
harbor的加密机制与后台修改登录密码
查看>>
Android IT资讯网络阅读器应用源码
查看>>
Java基础学习总结(23)——GUI编程
查看>>
Ruby on Rails 环境搭建
查看>>
MyBatis学习总结(八)——Mybatis3.x与Spring4.x整合
查看>>
部署System Center App Controller 2012 Service Pack 1 (5)
查看>>
MySQL:日期函数、时间函数总结
查看>>
工作是什么
查看>>
Linux 中cpu通略
查看>>
服务器端创建账户收件箱规则--将邮件复制到指定文件夹中
查看>>
java中简单集合框架(二)
查看>>
函数返回局部变量的一些问题
查看>>
Solaris11性能监控--处理器
查看>>
内存模型
查看>>
如何快速开发网站?
查看>>
tomcat等服务器返回给页面的数字分别表示的意思!
查看>>
我的友情链接
查看>>