给初入前端的同学，安利2个轮播图插件 SuperSlide 与 Swiper ！

SuperSlide PC端与移动端 的轮播图特效都是分开写2个js插件，而Swiper 基本一个插件可以写PC端与移动端的所有特效。

刚刚开始学习前端的同学，个人建议 先接触 SuperSlide ，这个上手快。而且特效大部分都是PC端，其实网页开发，PC端与移动端原理差不多，只是屏幕大小的问题。

SuperSlide 、Swiper 现在可以写自适应轮播图。

SuperSlide 写传统行业的官网 是完全OK的，写个轮播图，下拉菜单，Tab栏切换，基本插件都有demo，拿来稍微改装一下即可使用。当然改装时，需要考一下 该同学的CSS功底了，为什么 左右箭头定位到 轮播图 外时，消失不见了？大多都是 SuperSlide 最外层 的 div 写了 overflow:hidden 样式，消除即可。

我用SuperSlide 给客户写了3、4个自定义他们公司官网；这个插件就玩的差不多了，基本传统行业公司的网站大部分都一样，轮播图，Tab栏 完了。

SuperSlide 是可以 图片懒加载的，需要设置 一下JS参数；

Swiper，基本也满足日常网页的开发，但是它的移动端特效是做的不错，做一个移动端活动单页纯展示类型的。特效可以的很酷，下拉式滑动，滑动时左右动画。

个人开始SuperSlide 用的多些，觉得容易操作些吧！

附上它们的网址

www.superslide2.com

www.swiper.com.cn

前端-个人网页开发最常用的插件Superslide 与 swiper的更多相关文章

  1. web前端之html5开发中常用的开发工具

    正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发 ...

  2. 开发extjs常用的插件

    Spket是目前支持Ext 2.0最为出色的IDE. 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中.注:不支持配置项的代码提示 ...

  3. Visual Studio 开发工具常用的插件

    转载自落日故乡  http://www.spersky.com/post/vsPlugins.html 该博客中收集整理归纳了若干个常用的vs插件,比如高亮显示当前选择,垂直辅助线,折叠代码等等,具体 ...

  4. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  5. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  6. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

  7. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  8. JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧！！！！！！

    前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧!!!!!!2016-09-29    17 ...

  9. 转发—Android开发常用的插件及工具

    作者:蓝之风 出处:http://www.cnblogs.com/vaiyanzi/ Android开发常用的插件及工具 1.GitHub,这个不管是做安卓还是其他,只要是开发就必上的网站,也是天朝没 ...

随机推荐

  1. [CSP-S模拟测试]:count（树分块）

    题目描述 李华终于逃离了无尽的英语作文,重获自由的他对一棵树产生了兴趣.首先,他想知道一棵树是否能分成大小相同的几块(即切掉一些边,使得每个连通块的点数相同).然后,他觉得这个问题过于简单,于是他想知 ...

  2. mysql处理百万数据遍历速度提升（遍历图片名字是否存在）

    CREATE DEFINER=`root`@`localhost` FUNCTION `fun_wcmappendix02`(image_name VARCHAR(50)) RETURNS int(1 ...

  3. 多个springboot项目部署到tomcat，Error deploying web application archive

    每个springboot单独部署到tomcat下可以正常启动,多个一个就发生异常 Error deploying web application archive 解决:配置文件加上配置区分 sprin ...

  4. 定制化fiddler会话列表字段

    前言:fiddler默认会话列表已有一些显示字段,可能并不是我们需要的,我们可以自行定制化. 以会话耗时为例: 目录 1.方法一:修改js脚本 2.方法二:通过菜单栏设置 1.方法一:修改js脚本 点 ...

  5. 操作系统 - Linux命令整理 - Ubuntu

    镜像 http://mirrors.163.com/ubuntu-releases/ 系统相关 Ubuntu14.04相关 安装 - VMware Install Ubuntu Continue In ...

  6. 远控CVE整理

    Windows: CVE-2017-8464(通过快捷方式,可U盘/共享等途径传播)

  7. JS验证数字

    //1.验证数字 var reg = new RegExp("^[0-9]*$"); //var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+ ...

  8. List带索引的常用方法，以及集合的三种遍历

    package cn.learn.collection.List; import com.sun.source.tree.NewArrayTree; import java.util.ArrayLis ...

  9. JavaScript GetAbsoultURl

    var img = document.createElement('A');     img.src = "/img/weixin.jpg";  // 设置相对路径给Image,  ...

  10. Chrome打开标签页预览

    类似于Microsoft Edge浏览器上的标签页缩略图预览非常方便,其实现在谷歌浏览器正在测试相关的功能,如果想提前体验,就在地址栏输入"chrome://flags"并按下回车 ...