刚接触轮播的时候，感觉这种东西好高端，后来学习了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. 见鬼了，swiper

    1.今天不知怎么swiper的onInit函数不起作用,怎么弄都不行: 把以前能行的案例的包都导进去还是不行,但是onSlideChangeEnd可以触发,晕死了.... 不,它触发了一次onInit ...

  2. 64位MicrosoftOfficeWord加载EndnoteX7

    来源:http://jingyan.baidu.com/article/fcb5aff7a08036edaa4a71d0.html Win10 64bit 安装 Office2016 64bit 加载 ...

  3. ASP.NET MVC的Web Api的实练

    学习ASP.NET MVC一年多来,现在该学学Web Api了.API与ASP.NET MVC的Controller差不多.前者只是返回数据序列化和发送给客户端: 后者返回View或Render Vi ...

  4. Vs2013中通过Nuget添加不同版本jQuery

    vs2013中如果直接更新jQuery则是2X的版本,为了兼容IE浏览器的,一般都是希望使用jQuery1.x版本的jQuery,则可在调出Nuget的控制台,在控制台输入(此例子是下载jQuery ...

  5. 写Java也得了解CPU--CPU缓存

    CPU,一般认为写C/C++的才需要了解,写高级语言的(Java/C#/pathon...)并不需要了解那么底层的东西.我一开始也是这么想的,但直到碰到LMAX的Disruptor,以及马丁的博文,才 ...

  6. 利用writing-mode实现元素的垂直居中

    writing-mode是CSS3的新特性之一,使用场景不是很多.这个属性主要是改变文档流的显示方式.具体的介绍参考这篇文章:http://www.zhangxinxu.com/wordpress/2 ...

  7. Servlet学习之web服务器Tomcat 详解

    Web服务器是什么 Web服务器是指驻留于因特网上某种类型计算机的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处理该请求并将文件发送到该浏览器上,附带的信息会告诉浏览器如何查看该文 ...

  8. 【跟着子迟品underscore】从用 `void 0` 代替 `undefined` 说起

    Why underscore 最近开始看 underscore源码,并将 underscore源码解读 放在了我的 2016计划 中. 阅读一些著名框架类库的源码,就好像和一个个大师对话,你会学到很多 ...

  9. 在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案

    问题出现场景 在项目中采用nodejs做中间层,做页面的首屏渲染,同时采用express作为主web框架,其中express的router页面路由我采用ts语言来编写.如下: //page.ts 文件 ...

  10. Android开发遇到的坑（1）：Java中List的安全删除问题

    在项目的开发过程中,一定少不了的是对Java集合中的List接触.项目中对List的删掉也是一种常见的操作,看上这个操作也没什么好说的样子,但是在项目开发中也是最容易出错的地方,特别是对于新手.有时候 ...