1.焦点轮播路

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

2:通过ID获取到重要的元素(父容器、图片列表、左右切换按钮等)

给左右按钮加上点击事件,通过JS更新图片的位置,判断边界值,比如已经到了第一张或者最后一张图,要以防出现空白。

3.如果下方有小圆点:加一个索引变量,如果显示的是当前图片,当前小圆点高亮,更新索引值

给小圆点加上点击事件:通过小圆点的索引来判断当前点击的是哪一个原点,再更新当前圆点对应的图片的位置偏移量,再高亮当前小圆点

优化:已经是当前图片的时候再点击小圆点,可以不执行多余的操做(比如再跑一趟位置更新函数),可以直接判断当前小圆点是否有高亮样式,如果是高亮,维持当前状态,如果不是,再更新。

4.给图片左右移动的时候加上滑动效果

5.给轮播图加上自动切换的效果,通过一个定时器(鼠标不在图片上的时候),在设定一个清除定时器(当鼠标移上图片的时候触发)

常见js特效的思路的更多相关文章

  1. 36个JS特效教程,学完即精通

    6个JS特效教程,学完即精通   JavaScript特效教程,学完你就能写任何特效.本课程将JavaScript.BOM.DOM.jQuery和Ajax课程中的各种网页特效提取出了再进行汇总.内容涵 ...

  2. 6个JS特效教程,学完即精通

    6个JS特效教程,学完即精通 JavaScript特效教程,学完你就能写任何特效.本课程将JavaScript.BOM.DOM.jQuery和Ajax课程中的各种网页特效提取出了再进行汇总.内容涵盖了 ...

  3. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  4. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  5. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  6. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. 常见JS挂马方法及如何防止网站被黑客挂马?

    最近有朋友说自己的网站平时并未作弊,文章也都是原创的,更新很稳定.可不知道为什么网站突然就被各大搜索引擎降权了,一直找不到原因.最后发现是网站被挂马了,导致网站被连累了.在此,借助马海祥博客的平台,给 ...

  9. 一种轻便且灵活的js模板的思路

    一种轻便且灵活的js模板的思路 项目地址:https://github.com/j20041426/template 思路背景 在Vue.React.Angular等大前端框架异军突起的今天,写前端时 ...

随机推荐

  1. Mac OS X版本的sublime text 3安装汇编语言语法支持

    sublime是个好东西,小巧.功能强大而且跨平台! 不过默认的语法里没有对asm的支持,这让本猫情何以堪- 下面介绍一下Mac OS X中如何给sublime安装汇编的语法和自动汇编命令补全支持. ...

  2. LeetCode(51)- Count and Say

    题目: The count-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, 1211, 11 ...

  3. 深入浅出Java concurrent

    看   :http://www.blogjava.net/xylz/archive/2010/07/08/325587.html

  4. properties类是Hashtable的子类

    properties类是Hashtable的子类 增加了将Hashtable对象中的关键字保存到文件和从文件中读取关键字和值到Hashtable对象中的方法 Properties.store方法存储P ...

  5. Java——接口

    被interface修饰的类,叫接口接口里的方法都是抽象的,不能实现.用implements关键字可以让一个类来实现该接口.接口:一个类在继承另一个类的同时.还可以实现多个接口.接口的出现避免了单继承 ...

  6. java——多态

    多态定义:某一类事物的多种存在形态.对象的多态性.猫这类事物即具备猫的形态,又具备着动物的形态,这就是对象的多态性.简单说:就是一个对象对应着不同类型.多态在代码中的体现:父类或者接口的引用指向其子类 ...

  7. Ubuntu12.04下Django1.4的删除目录

    网上有很多文章说这个问题,大意就是下载压缩包以后用 sudo python setup.py install 上面这条命令安装的Django,然后到相关目录下把那个Django的目录删掉就Ok了,但是 ...

  8. 各种代码版本控制工具下使用http代理的方法

    原文:各种SCM工具下使用http代理下载源码:http://www.linuxeden.com/html/develop/20090723/66951.html SCM是软件配置管理的简称,常见的S ...

  9. 通过终端使用ssh-keygen免密码登录远程服务器

    使用终端ssh登录远程Linux服务器,每次不输入如密码 原理:使用keygen认证,实现免密码验证即可登录服务器. Linux(包括Mac OS): $ ssh-keygen /*生成密钥*/ $ ...

  10. 如何利用Python网络爬虫抓取微信朋友圈的动态(上)

    今天小编给大家分享一下如何利用Python网络爬虫抓取微信朋友圈的动态信息,实际上如果单独的去爬取朋友圈的话,难度会非常大,因为微信没有提供向网易云音乐这样的API接口,所以很容易找不到门.不过不要慌 ...