常见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等大前端框架异军突起的今天,写前端时 ...
随机推荐
- Android实训案例(二)——Android下的CMD命令之关机重启以及重启recovery
Android实训案例(二)--Android下的CMD命令之关机重启以及重启recovery Android刚兴起的时候,着实让一些小众软件火了一把,切水果,Tom猫,吹裙子就是其中的代表,当然还有 ...
- Android实训案例(一)——计算器的运算逻辑
Android实训案例(一)--计算器的运算逻辑 应一个朋友的邀请,叫我写一个计算器,开始觉得,就一个计算器嘛,很简单的,但是写着写着发现自己写出来的逻辑真不严谨,于是搜索了一下,看到mk(没有打广告 ...
- SharePoint 2007 单列表模糊查询SPD定制
应用场景:项目中总会遇到一些列表,存着是用户.项目等数据,而我们需要查询有哪些项目,这时候,就需要用到模糊查询了,而这样的查询,基本不需要跨列表,所以,也没必要配置复杂的搜索,用Designer(简称 ...
- C#基础随手笔记之基础操作优化
对数据的查询,删除等基本操作是任何编程语言都会涉及到的基础,因此,研究了一下C#中比较常用的数据操作类型,并顺手做个笔记. List查询时,若是处理比较大的数据则使用HashSet<T>类 ...
- 三、编辑 Update set
文档目录 开始使用 初始化查询实例: LambdaToSql.SqlClient DB = new LambdaToSql.SqlClient(); 更新单个实体对象,必须有主键Guid var e ...
- Object对象你真理解了吗?
前言 五一回家又断更了一个放假时间了~~~ 只有光头才能变强 回顾前面: ThreadLocal就是这么简单 多线程三分钟就可以入个门了! 多线程基础必要知识点!看了学习多线程事半功倍 Java锁机制 ...
- js正则表达式中test,exec,match方法的区别说明
js正则表达式中test,exec,match方法的区别说明 test test 返回 Boolean,查找对应的字符串中是否存在模式.var str = "1a1b1c";var ...
- 修改was数据源
本机的RAD运行的工程可以通过修改jpa中的persistence中的jni修改数据源: 对于通过was控制台部署的ear需要在was控制台:资源--jdbc 修改数据源
- 前端技术之_CSS详解第五天
前端技术之_CSS详解第五天 一.行高和字号 1.1 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的. <!DOCTYPE html ...
- Java main方法全解
1.main方法的重载 package cn.nxl2018; public class Main_test { public static void main(String args[]) { Sy ...