刚接触轮播的时候，感觉这种东西好高端，后来学习了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. iOS崩溃调试的使用和技巧总结

    在iOS开发调试过程中以及上线之后,程序经常会出现崩溃的问题.简单的崩溃还好说,复杂的崩溃就需要我们通过解析Crash文件来分析了,解析Crash文件在iOS开发中是比较常见的. 现在网上有很多关于解 ...

  2. Java核心技术点之集合框架

    1. 概述     Java集合框架由Java类库的一系列接口.抽象类以及具体实现类组成.我们这里所说的集合就是把一组对象组织到一起,然后再根据不同的需求操纵这些数据.集合类型就是容纳这些对象的一个容 ...

  3. ios蓝牙开发（五）BabyBluetooth蓝牙库介绍

    BabyBluetooth 是一个最简单易用的蓝牙库,基于CoreBluetooth的封装,并兼容ios和mac osx. 特色: 基于原生CoreBluetooth框架封装的轻量级的开源库,可以帮你 ...

  4. Theano2.1.17-基础知识之剖析theano的函数

    来自:http://deeplearning.net/software/theano/tutorial/profiling.html Profiling Theano function note:该方 ...

  5. SQL基础之XML

    1.XML数据类型 在SQL Server中xml数据类型可以用来保存xml文档,这个文档即可以是完整的xml文档和xml片段,这样开发者就可以像使用int数据类型一样来使用xml数据类型.不过xml ...

  6. 开源--豆瓣小组UWP，已上架应用商店

    1.前言 豆瓣小组是我和我老婆都比较喜欢的豆瓣家族里面的一款产品.平时加入了一些小组,偶尔打开看下新鲜的帖子,可以打发一下无聊的时间. 豆瓣小组UWP是我前几周在家里开发的一款windows 10应用 ...

  7. 你的C#代码是怎么跑起来的（二）

    接上篇:你的C#代码是怎么跑起来的(一) 通过上篇文章知道了EXE文件的结构,现在来看看双击后是怎样运行的: 双击文件后OS Loader加载PE文件并解析,在PE Optional Header里找 ...

  8. jsonp的优缺点

    转载:http://www.w3cfuns.com/notes/18271/df9ecd8f0ca5e523ae75745a3996c47c.html JSONP的优缺点        1.优点    ...

  9. 流量工程 traffic engineering (TE)

    什么是流量工程 流量工程是指根据各种数据业务流量的特性选取传输路径的处理过程.流量工程用于平衡网络中的不同交换机.路由器以及链路之间的负载. [编辑] 流量工程的内容 流量工程在复杂的网络环境中,控制 ...

  10. 【转】java.util.ResourceBundle使用详解

    原文链接:http://lavasoft.blog.51cto.com/62575/184605/ 人家写的太好了,条理清晰,表达准确.   一.认识国际化资源文件   这个类提供软件国际化的捷径.通 ...