圆月山庄资源网 Design By www.vgjia.com
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过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:
XML/HTML Code复制内容到剪贴板- <!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:
JavaScript Code复制内容到剪贴板- $(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);
- }
- });
- });
以上所述是小编给大家介绍的纯CSS3实现图片无间断轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]