前言：图片轮播效果现在在各大网站都是非常普遍的，以前我们都是通过postion的left or right来控制dom的移动，这里我要说的是利用css3来制作轮播！相比以前通过postion来移动dom来说，css3的实现方式更为优雅！

我相信使用过css3的童鞋们应该都知道我们是用css哪个大哥属性了吧！嗯，对的，就是translate3d我在前几天还特地写过一篇文章来介绍它，不熟悉的童鞋可以点击关键字链接过去看看！知道的童鞋们，那我们继续往下看！

首先，我们先说下思路

非无限循环: 直接设置每次移动的位移数值，然后根据时间段执行，比如索引从0-10，直接判断是否到0了，最后是否到10了，然后到了0或者10的时候直接将索引设置我相反的索引数就可以了。

无限循环: 无限循环的就需要考虑前后的衔接了，比如第一张图跟最后一张图，在执行的最后一张图的时候应该会出现第一张图，那么相反之下出现第一张图然后往右翻的时候就应该出现最后一张图。那么这是这么做到的呢？其实很简单，那就是clone克隆最后一个dom到第一个dom的前面，然后clone第一个dom到最后一个dom的后面，可能我这么说，大家听起来有点晕。那么我们直接看看下面的代码就知道原理了！

HTML:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">

     <meta content="yes" name="apple-mobile-web-app-capable" />

     <meta content="black" name="apple-mobile-web-app-status-bar-style" />

     <meta content="telephone=no" name="format-detection" />

     <title>轮播DEMO | 科博网-钟科的个人博客</title>

     <style>

         *{ padding:0; margin:0; border:0; }

         .wrap{ position: relative; height: 500px; width:360px; overflow:hidden; border:1px solid #ccc; margin:10px auto;  }

         .wrap-list{ width:9999px; transform:translate3d(-360px,0,0); transition-delay: .3s; transition:ease; }

         .wrap-list img{ float:left; width:360px; height: 500px; }

         .btns{ text-align:center; }

         .btns button{ width:100px; height: 30px; }

     </style>

 </head>

 <body>

 <div class="wrap">

     <div class="wrap-list">

         <!--这里需要clone-->

         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">

         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">

         <img src="http://img.mrco.cn/E32rcqdZn0uMt9JbXr0w0K95.jpg">

         <img src="http://img.mrco.cn/uWHhrhupbMphjzsYtS7IRSD_.jpg">

         <img src="http://img.mrco.cn/k2wZVNRo0YNU7i-wuC_-84Du.jpg">

         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">

         <!--这里需要clone-->

         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">

     </div>

 </div>

 <div class="btns">

     <button id="btnLeft">左</button>

     <button id="btnRight">右</button>

 </div>

 <script src="http://s.mrco.cn/scripts/libs/zepto/zepto.min.js?0.0.1"></script>

 <script src="http://s.mrco.cn/scripts/libs/zepto/selector.js?0.0.1"></script>

 <script src="http://s.mrco.cn/scripts//libs/zepto/touch.js?0.0.1"></script>

 </body>

 </html>

JavaScript:

 $(function(){

         var index = 1,          //默认的当前索引为1，因为clone了最有一个dom在第一个前面做衔接

             moveWidth = 360;    //每次需要移动的像素值

         //左移动

         $('#btnLeft').on('click',function(){

             //每次+1

             index++;

             //通过索引乘以移动像素值，那么就得到了移动的步位

             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });

             //这里的判断是衔接的关键所在，如果当前索引已经是最后一个dom了,也就是我们clone好的这个dom了，那就说明已经需要开始重新开始新的一轮了

             if(index == $('.wrap-list img').size() - 1){

                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作

                 setTimeout(function () {

                     //重置索引为1,相当于重头开始

                     index = 1;

                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;

                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})

                 }, 300);

             }

         });

         //右移动

         $('#btnRight').on('click',function(){

             //每次减一

             index--;

             //通过索引乘以移动像素值，那么就得到了移动的步位

             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });

             //这里的判断是衔接的关键所在,跟向右移是一个意思，等于0的时候就是到了clone的dom了，也就需要重新开始新的一轮了

             if(index === 0) {

                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作

                 setTimeout(function () {

                     //这里就需要设置到除去两个clone的dom之外的最后一个dom索引来

                     index = $('.wrap-list img').size() - 2;

                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;

                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})

                 }, 300);

             }

         });

     });

点击这里查看DEMO演示

是不是很简单，其实我们只要知道了原理，我们就可以去封装一个轮播插件，大家还可以加上自动滚动等监听事件。

好了，实现思路就分享到这里！如果大家有更好的建议或者想法欢迎给我留言！

原文地址：http://www.mrco.cn/article/57bd449fcf6935bd6dd1c0ae.html

利用CSS3实现图片无间断轮播图的实现思路的更多相关文章

  1. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  2. CSS3——animation的基础（轮播图）

    作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...

  3. CSS3之动画模块实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

  5. JQuery图片自适应窗口轮播图（淡入淡出效果）

    <script>var w = $(window).width();//获取窗口宽度var h = $(window).height();//获取窗口高度 $(".box&quo ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. element-ui中轮播图自适应图片高度

    哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...

  8. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  9. 移动端轮播图实现方法（dGun.js）

    本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...

随机推荐

  1. Android之线程池深度剖析

    1.线程池的引入   引入的好处:   1)提升性能.创建和消耗对象费时费CPU资源   2)防止内存过度消耗.控制活动线程的数量,防止并发线程过多.   使用条件:      假设在一台服务器完成一 ...

  2. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（2）用户登录、注销

    上次实现了用户注册,这次来实现用户登录,用到IAuthenticationManager的SignOut.SignIn方法和基于声明的标识.最后修改用户注册代码实现注册成功后直接登录. 目录: ASP ...

  3. eclipse将android项目生成apk并且给apk签名

    转载:http://www.cnblogs.com/tianguook/archive/2012/09/27/2705724.html 生成apk最懒惰的方法是:只要你运行过android项目,到工作 ...

  4. 模板引擎Nvelocity实例

    前言 最近一直忙于工作,没时间来管理博客,同时电脑也不给力,坏了一阵又一阵,最后还是去给修理了,这不刚一回来迫不及待的就写一篇文章来满足两个月未写博客的紧迫感. Nvelocity 关于nveloci ...

  5. Objective-C中的类目，延展，协议

    Objective-C中的类目(Category),延展(Extension),协议(Protocol)这些名词看起来挺牛的,瞬间感觉OC好高大上.在其他OOP语言中就没见过这些名词,刚看到这三个名词 ...

  6. 关于近段时间论坛型APP 的一段舍弃

    一直以为缓存务必要做的很好,好到什么程度呢,我曾这样想,用户在下滑数刷新的时候也要做到,先加载久缓存再加载新的,同时只改变旧的某些项.这样的想法真的很好!好到我花费了三天去设计数据库和服务器的 php ...

  7. Xen之初体验：XenMotion、 StorageMotion、Site Recovery、Power Management 各种新、高级功能免费

    Xenserver 的新版本6.2现在已经全面开源,省掉了原有的序列号,也能免费体验曾经标题中的付费高级功能. 安装镜像:http://downloadns.citrix.com.edgesuite. ...

  8. Android 数据库框架OrmLite的使用（一）

    在这里记录下最基本的用法,官网上可了解相关的介绍. 1.下载OrmLite jar 在下载android的:ormlite-android-4.48.jar和ormlite-core-4.48.jar ...

  9. Oracle库Delete删除千万以上普通堆表数据的方法

    需求:Oracle数据库delete删除普通堆表千万条历史记录. 直接删除的影响: 1.可能由于undo表空间不足从而导致最终删除失败的问题: 2.可能导致undo表空间过度使用,影响到其他用户正常操 ...

  10. 你想不到的！CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...