网页制作

纯CSS3实现图片无间断轮播效果
网页制作 2024/11/15 佚名
3 2

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

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

效果图如下所示：

纯CSS3实现图片无间断轮播效果

首先，我们先说下思路

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

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

HTML:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">  
  7.     <meta content="yes" name="apple-mobile-web-app-capable" />  
  8.     <meta content="black" name="apple-mobile-web-app-status-bar-style" />  
  9.     <meta content="telephone=no" name="format-detection" />  
  10.     <title>轮播DEMO | 科博网-钟科的个人博客</title>  
  11.     <style>  
  12.         *{ padding:0; margin:0; border:0; }   
  13.         .wrap{ position: relative; height: 500px; width:360px; overflow:hidden; border:1px solid #ccc; margin:10px auto;  }   
  14.         .wrap-list{ width:9999px; transform:translate3d(-360px,0,0); transition-delay: .3s; transition:ease; }   
  15.         .wrap-list img{ float:left; width:360px; height: 500px; }   
  16.         .btns{ text-align:center; }   
  17.         .btns button{ width:100px; height: 30px; }   
  18.     </style>  
  19. </head>  
  20. <body>  
  21. <div class="wrap">  
  22.     <div class="wrap-list">  
  23.         <!--这里需要clone-->  
  24.         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">  
  25.         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">  
  26.         <img src="http://img.mrco.cn/E32rcqdZn0uMt9JbXr0w0K95.jpg">  
  27.         <img src="http://img.mrco.cn/uWHhrhupbMphjzsYtS7IRSD_.jpg">  
  28.         <img src="http://img.mrco.cn/k2wZVNRo0YNU7i-wuC_-84Du.jpg">  
  29.         <img src="http://img.mrco.cn/PKUgbaXooTzIz4TZQl7heAGF.jpg">  
  30.         <!--这里需要clone-->  
  31.         <img src="http://img.mrco.cn/VQeqlUbGMLcGqpy-QnDjzyZn.jpg">  
  32.     </div>  
  33. </div>  
  34. <div class="btns">  
  35.     <button id="btnLeft">左</button>  
  36.     <button id="btnRight">右</button>  
  37. </div>  
  38. <script src="http://s.mrco.cn/scripts/libs/zepto/zepto.min.js?0.0.1"></script>  
  39. <script src="http://s.mrco.cn/scripts/libs/zepto/selector.js?0.0.1"></script>  
  40. <script src="http://s.mrco.cn/scripts//libs/zepto/touch.js?0.0.1"></script>  
  41. </body>  
  42. </html>  

JavaScript:

JavaScript Code复制内容到剪贴板
  1. $(function(){   
  2.         var index = 1,          //默认的当前索引为1，因为clone了最有一个dom在第一个前面做衔接   
  3.             moveWidth = 360;    //每次需要移动的像素值   
  4.         //左移动   
  5.         $('#btnLeft').on('click',function(){   
  6.             //每次+1   
  7.             index++;   
  8.             //通过索引乘以移动像素值，那么就得到了移动的步位   
  9.             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });   
  10.             //这里的判断是衔接的关键所在，如果当前索引已经是最后一个dom了,也就是我们clone好的这个dom了，那就说明已经需要开始重新开始新的一轮了   
  11.             if(index == $('.wrap-list img').size() - 1){   
  12.                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作   
  13.                 setTimeout(function () {   
  14.                     //重置索引为1,相当于重头开始   
  15.                     index = 1;   
  16.                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;   
  17.                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})   
  18.                 }, 300);   
  19.             }   
  20.         });   
  21.         //右移动   
  22.         $('#btnRight').on('click',function(){   
  23.             //每次减一   
  24.             index--;   
  25.             //通过索引乘以移动像素值，那么就得到了移动的步位   
  26.             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });   
  27.             //这里的判断是衔接的关键所在,跟向右移是一个意思，等于0的时候就是到了clone的dom了，也就需要重新开始新的一轮了   
  28.             if(index === 0) {   
  29.                 //css3的动画有一个300毫秒的执行时间,所以我们这里也需要等待300毫秒后再进行重置操作   
  30.                 setTimeout(function () {   
  31.                     //这里就需要设置到除去两个clone的dom之外的最后一个dom索引来   
  32.                     index = $('.wrap-list img').size() - 2;   
  33.                     //重置wrap盒子为默认的其实位置开始，这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;   
  34.                     $('.wrap-list').css({transform: 'translate3d(-' + (index * moveWidth) + 'px,0,0);transition-duration: 0s;'})   
  35.                 }, 300);   
  36.             }   
  37.         });   
  38.     });  

以上所述是小编给大家介绍的纯CSS3实现图片无间断轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
css3实现轮播图,css3实现图片轮播
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“纯CSS3实现图片无间断轮播效果”

暂无“纯CSS3实现图片无间断轮播效果”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com