刚接触轮播的时候，感觉这种东西好高端，后来学习了jquery后，发现原来挺简单的，而且实现轮播也有很多形式，我用jquery自制了一个轮播插件，其实我这个说是插件，好像其实就是一个高度抽象的函数而已。慢慢来！以后再整高端点的！

首先原理是有个outerbox的容器，就是轮播的整体框架了，大小最好与图片的大小一致；然后outerbox内部嵌套一个innerbox，innerbox是个很长的容器，里面放着图片，然后通过移动innerbox的位置实现outerbox里显示不同的图片，原理非常简单！

这个插件只需要设置outerbox的宽度和高度就可以正常使用，还可以通过传递参数修改轮播间隔和颜色风格，整体风格类似于亚马逊首页的轮播图。

不过通过js在outerbox里新建了好多个元素，不知道对性能影响大不大或者是否有更大的不良后果，通过以后的学习再来解答这个问题吧。

效果图：

代码在我的github：https://github.com/zhangcuiZC/slideshowzc

js-自制轮播插件！的更多相关文章

  1. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  2. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  4. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  5. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  6. owl-carousel轮播插件的使用

    插件github地址:https://github.com/OwlFonk/OwlCarousel: 插件官网演示地址:http://owlgraphic.com/owlcarousel/: 1.选择 ...

  7. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  8. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  9. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

随机推荐

  1. 产品经理技能之BRD的笔记之菜鸟入门

    链接:http://www.woshipm.com/pmd/178527.html?utm_source=tuicool 要学习MRD.PRD,先从BRD开始,才能做到知其然知其所以然. BRD是什么 ...

  2. 清北学堂2017NOIP冬令营入学测试P4749 F’s problem(f)

    时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试 描述 这个故事是关于小F的,它有一个怎么样的故事呢. 小F是一个田径爱好者,这天它们城市里正在 ...

  3. ViewModelLocator

    ViewModelLocator 这里先鼓舞下士气,ViewModelLocator很简单,甚至可以去掉,它不是Mvvm必须的.在初学Mvvm时,一般都是使用NuGet安装 MvvmLight框架,总 ...

  4. 【算法之美】求解两个有序数组的中位数 — leetcode 4. Median of Two Sorted Arrays

    一道非常经典的题目,Median of Two Sorted Arrays.(PS:leetcode 我已经做了 190 道,欢迎围观全部题解 https://github.com/hanzichi/ ...

  5. PHP 实现页面静态化

    PHP文件执行阶段:语法分析->编译->运行 静态html文件执行顺序:运行 动态程序: 连接数据库服务器或者缓存服务器->获取数据->填充到模板->呈现给用户 关于优化 ...

  6. JVM内存管理------GC算法精解（复制算法与标记/整理算法）

    本次LZ和各位分享GC最后两种算法,复制算法以及标记/整理算法.上一章在讲解标记/清除算法时已经提到过,这两种算法都是在此基础上演化而来的,究竟这两种算法优化了之前标记/清除算法的哪些问题呢? 复制算 ...

  7. 深入理解计算机系统（2.2）---布尔代数以及C语言上的位运算

    布尔代数上的位运算 布尔代数是一个数学知识体系,它在0和1的二进制值上演化而来的. 我们不需要去彻底的了解这个知识体系,但是里面定义了几种二进制的运算,却是我们在平时的编程过程当中也会遇到的.这四种运 ...

  8. Android浮动小球与开机自启动

    看着手机上的360浮动小球,不评价其具体的功能与实用性,至少在UI设计与交互方面是个不小的创新. 如图片左上角所示,球中还会显示当前手机的运行状况,向下拉动还会有弹射来达到加速.清理等目的. 那好,先 ...

  9. 服务端JavaScript之Rhino

    最近在看js的书,书上有介绍两个服务端js,以前只听说过node.js,第一次听说Rhino.js,并且已经集成到了jdk1.6;看来还是见的少啊! Rhino是一种用Java编写的javaScrip ...

  10. STL中algorithm里的查找

    首先,选择查找算法时,区间是否排序是一个至关重要的因素.可以按是否需要排序区间分为两组: A. count,find B. binary_search,lower_bound,upper_bound, ...