首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onAugust 25, 2016

前言：图片轮播效果现在在各大网站都是非常普遍的，以前我们都是通过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实现图片无间断轮播效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条
Apr 26 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 #HTML / CSS
CSS3实现跳动的动画效果
Sep 12 #HTML / CSS
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 #HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 #HTML / CSS
利用CSS3实现炫酷的飞机起飞动画
Sep 17 #HTML / CSS
CSS3 3D制作实战案例分析
Sep 18 #HTML / CSS
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 #HTML / CSS
mixin(1) 绝对定位(1) 相对定位(1) lua(3) GTID(1) postcss-px2rem(1) 游标(1) ref(1) ECharts(3) props(1)
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP与SQL注入攻击[二]
2007/04/17 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php实现留言板功能
2017/03/05 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
Javascript 实现微信分享（QQ、朋友圈、分享给朋友）
2016/10/21 Javascript
JS中split()用法（将字符串按指定符号分割成数组）
2016/10/24 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Blue Nile台湾：钻石珠宝商，订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
CheapTickets泰国：廉价航班，查看促销价格并预订机票
2019/12/28 全球购物
《藏戏》教学反思
2014/02/11 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
Python Numpy库的超详细教程
2022/04/06 Python