纯CSS3完成照片无中断轮播实际效果

日期:2020-10-30 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

序言:照片轮播实际效果如今在各大网站全是十分广泛的,之前大家全是根据postion的left or right来操纵dom的挪动,这里我要说的是运用css3来制做轮播!相比之前根据postion来挪动dom来讲,css3的完成方法更加雅致!

我坚信应用过css3的童鞋们应当都了解大家是用css哪一个哥哥特性了吧!嗯,对的,便是translate3d我在前几日还特意写过1篇文章内容来详细介绍它,不熟习的童鞋能够点一下重要字连接以往看看!了解的童鞋们,那大家再次往下看!

实际效果图以下所示:

最先,大家先说下思路

非无尽循环系统: 立即设定每次挪动的位移标值,随后依据時间段实行,例如数据库索引从0⑴0,立即分辨是不是到0了,最终是不是到10了,随后到了0或10的情况下立即将数据库索引设定我相反的数据库索引数便可以了。

无尽循环系统: 无尽循环系统的就必须考虑到前后左右的对接了,例如第1张图跟最终1张图,在实行的最终1张图的情况下应当会出現第1张图,那末相反之下出現第1张图随后往右翻的情况下就应当出現最终1张图。那末这是这么保证的呢?实际上很简易,那便是clone克隆最终1个dom到第1个dom的前面,随后clone第1个dom到最终1个dom的后边,将会我这么说,大伙儿听起来有点晕。那末大家立即看看下面的编码就了解基本原理了!

HTML:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF⑻">  
  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 | 科博网-钟科的本人blog</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(⑶60px,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_⑻4Du.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了最有1个dom在第1个前面做对接   
  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.             //这里的分辨是对接的重要所属,假如当今数据库索引早已是最终1个dom了,也便是大家clone好的这个dom了,那就表明早已必须刚开始再次刚开始新的1轮了   
  11.             if(index == $('.wrap-list img').size() - 1){   
  12.                 //css3的动漫有1个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.             //每次减1   
  24.             index--;   
  25.             //根据数据库索引乘以挪动像素值,那末就获得了挪动的步位   
  26.             $('.wrap-list').css({ transform:'translate3d(-'+ (index * moveWidth) +'px,0,0);transition-duration: 0.3s;' });   
  27.             //这里的分辨是对接的重要所属,跟向右移是1个意思,等于0的情况下便是到了clone的dom了,也就必须再次刚开始新的1轮了   
  28.             if(index === 0) {   
  29.                 //css3的动漫有1个300毫秒的实行時间,因此大家这里也必须等候300毫秒后再开展重设实际操作   
  30.                 setTimeout(function () {   
  31.                     //这里就必须设定到去除两个clone的dom以外的最终1个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完成照片无中断轮播实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!