常见js特效的思路
1.焦点轮播路
1.布局:父容器用overflow:hidden隐藏多余的图片
2:通过ID获取到重要的元素(父容器、图片列表、左右切换按钮等)
给左右按钮加上点击事件,通过JS更新图片的位置,判断边界值,比如已经到了第一张或者最后一张图,要以防出现空白。
3.如果下方有小圆点:加一个索引变量,如果显示的是当前图片,当前小圆点高亮,更新索引值
给小圆点加上点击事件:通过小圆点的索引来判断当前点击的是哪一个原点,再更新当前圆点对应的图片的位置偏移量,再高亮当前小圆点
优化:已经是当前图片的时候再点击小圆点,可以不执行多余的操做(比如再跑一趟位置更新函数),可以直接判断当前小圆点是否有高亮样式,如果是高亮,维持当前状态,如果不是,再更新。
4.给图片左右移动的时候加上滑动效果
5.给轮播图加上自动切换的效果,通过一个定时器(鼠标不在图片上的时候),在设定一个清除定时器(当鼠标移上图片的时候触发)
常见js特效的思路的更多相关文章
- 36个JS特效教程,学完即精通
6个JS特效教程,学完即精通 JavaScript特效教程,学完你就能写任何特效.本课程将JavaScript.BOM.DOM.jQuery和Ajax课程中的各种网页特效提取出了再进行汇总.内容涵 ...
- 6个JS特效教程,学完即精通
6个JS特效教程,学完即精通 JavaScript特效教程,学完你就能写任何特效.本课程将JavaScript.BOM.DOM.jQuery和Ajax课程中的各种网页特效提取出了再进行汇总.内容涵盖了 ...
- 滚动变色的文字js特效
Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- <一>初探js特效魅力之选项卡05
初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 常见JS挂马方法及如何防止网站被黑客挂马?
最近有朋友说自己的网站平时并未作弊,文章也都是原创的,更新很稳定.可不知道为什么网站突然就被各大搜索引擎降权了,一直找不到原因.最后发现是网站被挂马了,导致网站被连累了.在此,借助马海祥博客的平台,给 ...
- 一种轻便且灵活的js模板的思路
一种轻便且灵活的js模板的思路 项目地址:https://github.com/j20041426/template 思路背景 在Vue.React.Angular等大前端框架异军突起的今天,写前端时 ...
随机推荐
- 一个简单的基于 DirectShow 的播放器 1(封装类)
DirectShow最主要的功能就是播放视频,在这里介绍一个简单的基于DirectShow的播放器的例子,是用MFC做的,今后有机会可以基于该播放器开发更复杂的播放器软件. 注:该例子取自于<D ...
- 一行代码实现FMDB的CURD操作
上次实现FMDB的CURD基本操作后,用在项目里,每个实体类都要写SQL语句来实现创建表和CURD操作,总觉得太麻烦,然后就想着利用反射和kvc来实现一个数据库操作的基类继承一下,子类只需要继承,然后 ...
- linux开发调试工具---GDB的使用
编译 gcc -g xxx.c -o xxxgdb gdb xxxgdb 进入gdb调试界面 查看代码 list ==> l 设置断点 可以以函数为断点 / 行数 break ...
- 恶补web之六:javascript知识(2)
若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...
- ruby正则表带式对象使用备忘
ruby对于正则表达式的使用是非常灵活的,提供了专门的正则表达式对象Regexp.其包括match实例方法,字符串也含有该方法.so可以这么做: /a/ =~ "a" " ...
- JAVA代码设置selector不同状态下的背景颜色
代码实现Shape 代码实现Selector StateListDrawable与GradientDrawable 的运用 在Android开发中,我们时常会用到自定义drawable样式,在draw ...
- CAN数据格式-ASC
Vector工具录制的数据,一般有ASC和BLF两种格式,本文介绍ASC. 1. ASC定义 ASC(ASCII)即文本文件,数据已可视化的文本存储. 2.ASC查看 通常情况下,用记事本就可以打开. ...
- [转]用python 10min手写一个简易的实时内存监控系统
简易的内存监控系统 本文需要有一定的python和前端基础,如果没基础的,请关注我后续的基础教程系列博客 文章github源地址,还可以看到具体的代码,喜欢请在原链接右上角加个star 腾讯视频链接 ...
- C 实现基于角色的权限系统
本文demo下载地址:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1068 实例使用C# 实现基于角色的权限 ...
- 接口和抽象类的区别(JDK1.8)
1.一个类只能进行单继承,但可以实现多个接口. 2.有抽象方法的类一定是抽象类,但是抽象类里面不一定有抽象方法: 接口里面所有的方法的默认修饰符为public abstract,接口里的成员变量默认的 ...