常见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等大前端框架异军突起的今天,写前端时 ...
随机推荐
- SharePoint 2010 之寻找页面布局
习惯了2007的页面布局,虽然感觉不是太好用,尤其以开始接触时非常不理解页面布局和页面的关系,但是后来理清了,感觉还是很好用的,尤其对于相同格式的网站,修改布局而不改页面的情况,还是非常有效的,好了, ...
- Ibatis和Hibernate的比较
Ibatis和Hibernate的比较 分类: IBATIS HIBERNATE2010-11-19 17:58 341人阅读 评论(0) 收藏 举报 hibernateibatis数据库sqlcac ...
- Day24 中间件 自定义分页 ModelForm 序列化 缓存 信号
在views里边,怎么导入局部配置和全局配置 from s18day24 import settings #这样导入的是仅仅用户自定义的配置 from django.conf import setti ...
- 浅析fork()和底层实现
记得以前初次接触fork()函数的时候,一直被“printf”输出多少次的问题弄得比较晕乎.不过,“黄天不负留心人".哈~ 终于在学习进程和进程创建fork相关知识后,总算是大致摸清了其中的 ...
- 导入项目 idea
下的java核心编程的源码,只有java文件,没有idea或者eclipse的项目结构信息. 分别用eclipse和idea打开了一遍,方便学习调试. 项目文件夹:E:\学习资料\Java\语法\ja ...
- SQL基本语句的优化10个原则
原则一:尽量避免在列上进行运算,这样会导致索引失效. 例如: ; 优化: SELECT * FROM table WHERE d >= '2011-01-01'; 原则二:使用JOIN时,应该用 ...
- ThinkPHP5从零基础搭建CMS系统(一)
了解学习thinkphp5应该是2016年年底的事情,当时还没有接触过thinkphp3版本,觉得通过手册直接上手学习tp5蛮轻松的,现在从零记录下,搭建可扩展的CMS. 1.ThinkPHP环境搭建 ...
- java数组遍历、java方法定义
1.遍历数组for与foreach String [] test = {"java","php","bootstrap","vu ...
- Java基础:内存模型
1. 引言 2. Java内存模型 3. 内存间的交互操作 1. 引言 考虑到计算机组成的内容: 原始的计算机是CPU用于计算+硬盘用于存储,由于CPU的高速发展和硬盘的缓慢发展,高速的存储需要持续供 ...
- 万网主机使用wordpress发送邮件的方法
今天弄了一下午总算明白了,这里写一下具体过程. 首先是邮箱,万网主机是不支持mail()函数的,所以默认的不可用,如果你想发送邮件的话,只能使用fsockopen()函数.首先进入万网主机管理平台,启 ...