刚接触轮播的时候，感觉这种东西好高端，后来学习了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. 数据表格 - DataGrid - 列表显示

    <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding=& ...

  2. Query on a tree——树链剖分整理

    树链剖分整理 树链剖分就是把树拆成一系列链,然后用数据结构对链进行维护. 通常的剖分方法是轻重链剖分,所谓轻重链就是对于节点u的所有子结点v,size[v]最大的v与u的边是重边,其它边是轻边,其中s ...

  3. Codevs 1051 二叉树最大宽度和高度

    1501 二叉树最大宽度和高度  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver       题目描述 Description 给出一个二叉树,输出它的最大宽 ...

  4. NET WebApi OWIN 实现 OAuth 2.0

    NET WebApi OWIN 实现 OAuth 2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和 ...

  5. codevs 3165 爱改名的小融2

    3149 爱改名的小融 2 http://codevs.cn/problem/3149/ 题目描述 Description Wikioi上有个人叫小融,他喜欢改名.现在他的要求变了,只要是英文字母就是 ...

  6. 页面跳转Transfer与Redirect的区别你知道吗？

    一 前言 关于页面跳转的方式常用的应该就是,链接跳转,js跳转,Server.Tranfser和Response.Redirect 这几种,可是在Tranfser与Redirect之间用哪种更好(本文 ...

  7. .net破解二(修改dll)

    多谢大家支持! 昨天说了一下反编译与剥壳(.net破解一(反编译,反混淆-剥壳,工具推荐)),今天就来修改修改dll,为了方便,我自己写一个简单程序用来测试 代码如下: 一个 ConsoleAppli ...

  8. XMl各种格式转换功能代码

    package com.cdv.test; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.File ...

  9. Android下的数据储存方式(三）

      Android下最好的数据储存方式:关系型数据库sqlite.   数据库的创建:使用SqliteOpenHelper类 结合SqliteOpenHelper类和SQLiteDatabase类的帮 ...

  10. python环境搭建-Linux系统下python2.6.6升级python3.5.2步骤

    [root@template ~]# python -v # /usr/lib64/python2.6/encodings/utf_8.pyc matches /usr/lib64/python2.6 ...