利用CSS3实现图片无间断轮播图的实现思路
前言：图片轮播效果现在在各大网站都是非常普遍的，以前我们都是通过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);
}
});
});
是不是很简单，其实我们只要知道了原理，我们就可以去封装一个轮播插件，大家还可以加上自动滚动等监听事件。
好了，实现思路就分享到这里！如果大家有更好的建议或者想法欢迎给我留言！
原文地址：http://www.mrco.cn/article/57bd449fcf6935bd6dd1c0ae.html
利用CSS3实现图片无间断轮播图的实现思路的更多相关文章
- 利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
- CSS3——animation的基础（轮播图）
作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...
- CSS3之动画模块实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- JQuery图片自适应窗口轮播图（淡入淡出效果）
<script>var w = $(window).width();//获取窗口宽度var h = $(window).height();//获取窗口高度 $(".box&quo ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- 移动端轮播图实现方法（dGun.js）
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
随机推荐
- VMware 中如何打开U盘弹出U盘或者移动硬盘的（两种方法）
1.U盘如下,插入后都是直接在win里面显示的 2.选择连接u盘 3.u盘就可以在虚拟机里面显示了 4.弹出则选择断开连接 扩展:如果无效:请参考这种方法 (给虚拟机分配一个临时硬盘,然后设置这个临时 ...
- Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建（附演示,apk,全部源码）
1.前言 身处在移动互联网的今天,移动应用开发炙手可热,身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者(马上就大四啦), 暑假在学校参加GIS比赛有大把 ...
- Mesh Data Structure in OpenCascade
Mesh Data Structure in OpenCascade eryar@163.com 摘要Abstract:本文对网格数据结构作简要介绍,并结合使用OpenCascade中的数据结构,将网 ...
- .NET足球赛事资料数据库平台SmartLottery开源发布——全球足球联赛应有尽有
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 前2个月,我的系列文 ...
- JavaScript之自我总结篇
最近在看汤姆大叔的"深入理解JavaScript系列",写得真的不错,对于我而言特别是12章到19章,因为大叔研究的点,就主要是从底层来研究JavaScript为什么会出现钟种特有 ...
- 通过监控线程状态来保证socket服务器的稳定运行
云平台中使用的socket服务器是我们自己定义一套通信协议,并通过C#实现的一个socket服务. 该服务目前是和web服务一起运行在IIS容器中,通过启动一个永不退出的新线程来监听端口. 在开发的初 ...
- 从客户端(&)中检测到有潜在危险的 Request.Path 值
首先,这个问题出现在 ASP.NET MVC 应用程序中,所以下面的解决方式都是在这个环境下. 关于这个问题,网上又很多的答案,当时也搜了一些: A potentially dangerous Req ...
- MVC中实现加载更多
需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多) 每次加载时显示“正在 ...
- APP接口自动化测试JAVA+TestNG(三)之HTTP接口测试实例
前言 前两篇普及相关基础知识后,本篇主要对举例对国家气象局接口自动化测试进行讲解(Get请求及结果断言),以达到自动化测试入门目的,除了前两篇的一些了解外,需要有一定的JAVA知识(HTTP相 ...
- JConsole远程连接配置
JConsole远程连接还是有一点坑的.这里记录一下配置过程,好记性不如烂笔头. 1.在远程机的tomcat的catalina.sh中加入配置: JAVA_OPTS="$JAVA_OPTS ...