作为一个前端工程师，无论公司是什么行业，无论你做什么端，基本都会遇到一个避不开的动画效果：循环轮播。做轮播并不难，市场上的轮播插件有很多，其中比较著名的是swiper，使用也非常简单。但轮播插件这种东西总归是不灵活的，一些简单的场景还可以应付，比较复杂一点的场景处理起来就比较麻烦了。今天我会全程带大家来写一个循环轮播，用到的技术有：html、css、JavaScript、jQuery，都是前端最基础的技术，有基础又爱学肯学的你一定一听就会，如果不会咋整？那多看几遍。?
　　1. 效果展示
　　以小米官网的图片轮播为例，实际上千篇一律，好啦，看下图：
　　　好啦，看效果，不要看妹子，虽然妹子长得是很好看啦！
　　2. 原理分析
　　无限循环轮播的原理是在展示内容的前后各放一组图片，以无限循环展示3张照片为例，三张图片我给它取名为1.jpg,2.jpg,3.jpg,图片展示分别如下：
　　原理示意图展示：
　　原理其实就是复制两组同样的照片分别放在前面和后面(实际上不用完全复制两组，只需要前面可以到1.jpg，后面也可以到1.jpg就好了，但这里我为了方便大家理解，就采用这样的方式了)。当点左边按钮，图片轮播到第一张1.jpg时，让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置，注意一定要是瞬间。同理，当点右边按钮时，图片轮播到第三张1.jpg的时候，也让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置。这是实现图片循环轮播的关键，稍后会仔细讲解。
　　3. 代码
　　html代码：
&div class="slideImageContainer"&
&div class="slideImageLists"&
&img src="1.jpeg" /&
&img src="2.jpeg" /&
&img src="3.jpeg" /&
&img src="1.jpeg" /&
&img src="2.jpeg" /&
&img src="3.jpeg" /&
&img src="1.jpeg" /&
&img src="2.jpeg" /&
&img src="3.jpeg" /&
&div class="slideLeftBtn" id="slideLeftBtn"&&/div&
&div class="slideRightBtn" id="slideRightBtn"&&#xe60e&/div&
　　css 代码：
padding: 0;
margin: 0;
@font-face {
font-family: 'iconfont';
/* project id 208314 */
src: url('//at.alicdn.com/t/font_l9oi1sn4hmh1tt9.eot');
src: url('//at.alicdn.com/t/font_l9oi1sn4hmh1tt9.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_l9oi1sn4hmh1tt9.woff') format('woff'),
url('//at.alicdn.com/t/font_l9oi1sn4hmh1tt9.ttf') format('truetype'),
url('//at.alicdn.com/t/font_l9oi1sn4hmh1tt9.svg#iconfont') format('svg');
.slideImageContainer{
position: relative;
width: 600px;
height: 300px;
margin: 0 auto;
border: solid 1px red;
overflow: hidden;
.slideImageLists{
position: absolute;
left: -1800px;
width: 10000px;
height: 300px;
.slideImageLists img{
display: block;
width: 600px;
height: 300px;
.slideLeftBtn,.slideRightBtn{
position: absolute;
font-family: "iconfont";
font-size: 60px;
top: 120px;
color: #191f25;
opacity: 0.3;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
.slideLeftBtn:hover,.slideRightBtn:hover{
opacity: 0.6;
.slideLeftBtn{
left: 10px;
.slideRightBtn{
right: 10px;
　　页面布局是很重要的一部分内容，它是页面的基石。页面布局写得好实现效果的时候能带来很大的方便。因此这里强调几个应该注意的地方：
　　1.& 所有的图片要放在一个很长的容器中，这里是slideImageList，每次移动实际上就是它在相对于他的父元素slideImageContainer而移动，所以需要给slideImageContainer 一个 position:relative 的定位，给 slideImageList 一个 position: absoluete 的定位。
　　2. slideImageList要放在一个比较小的容器中，在这里是slideImageContainer，作用是为了显示你想要显示的区域，注意要加 overflow:hidden 属性，让多余的内容不显示。
　　3. 左右按钮我采用的是iconfont的使用方式，这个比较简单，此处不多加以阐述。不会使用iconfont的同学可以直接贴两个图片或者左右箭头符号在上面。
　　4. 容器slideImageList中的图片要排列在一条直线上，并且初始情况下需要给slideImageList一个left值，因为最开始我们想让第四张照片展示，所以此时的left值为-1800px，要记住这个值，因为我们待会儿要常用到这个值。
　　5. @font-face 是引入 iconfont 相关的资源内容，不使用iconfont的可忽略。
　　接下来看javascript代码：
var slideIndex = 3;
//记录初始图片的下标( 默认最初展示第四张图片，下标从0开始，所以初始值为3 )
//左边按钮的点击事件
$("#slideLeftBtn").on("click",function(){
// 点击左按钮的时候想要显示当前图片的前一张，所以slideIndex值要减去1
slideIndex--;
// animateLength表示想要让slideImageLists移动到什么位置，slideImageLists 的位置由 left属性来控制
　　 var animateLength = slideIndex * (-600) + "px";
$(".slideImageLists").animate({"left":animateLength},"slow",function(){
// animate的回调函数(即执行完动画之后才会执行函数里面的内容)
if(slideIndex &= 0){
$(".slideImageLists").css({"left":"-1800px"});
slideIndex = 3;
//右边按钮的点击事件
$("#slideRightBtn").on("click",function(){
// 点击右按钮的时候想要显示当前图片的后一张，所以slideIndex值要加上1
slideIndex++;
var animateLength = slideIndex * (-600) + "px";
$(".slideImageLists").animate({"left":animateLength},"slow",function(){
　　　　　if(slideIndex &= 6){
$(".slideImageLists").css({"left":"-1800px"});
slideIndex = 3;
　　现在着重来分析一下JavaScript的代码，同样有几个关键点需要注意，其中部分我已在代码中注释：
　　1. 全局变量 slideIndex 指的是图片的下标，一共有九张照片，下标从0开始，所以九张照片的下标值分别为0-8，此处我们默认展示第四张照片，所以slideIndex 的初始值置为 3 。另外需要注意的是，slideIndex 是全局变量，所以函数内函数外都可以访问到，并且只初始化一次。
　　2. 局部变量 animateLength 指的是想要 slideImageLists 运动到的位置，注意要加单位，并且需要赋值给 slideImageList 的 left 属性。
　　3. jQuery的 animate 方法 ,详情见下图：
&　　接下来完整的分析一下流程，以点击左按钮为例：
　　1. 初始情况下展示第四张图片，下标为 3 。 ( var slideIndex = 3 )
　　2. 给左按钮绑定一个点击事件
　　3. 点击左按钮的时候，想要展示当前照片的前一张，所以图片下标需要减去1 ( slideIndex-- )
　　4. 计算 slideImageLists 要移动的位置 （ slideIndex * (-600) + "px" ），记得加单位。为什么要乘以 -600 ，首先 600 是一张照片的宽度，上面我们分析过了如果要默认展示第四张照片的话 slideImageLists 的 left 属性值为 -1800px，同理，点击左按钮，想要展示第三张照片，那么此时需要 slideImageLists 的 left 属性值为 -1200px，所以就是 ( 3 - 1 ) * ( -600 ) + "px" = -1200px 。
　　5. 利用 animate 来执行动画。将上一步计算出来的值赋值给 slideImageLists 的 left 属性。注意 animate方法本身就是含有过渡的，所以切记不需要在 slideImageLists 上面再加 transtion 属性来实现过渡。
　　6. 实现循环轮播的重点来了。以上步骤实现了轮播，但没有实现循环轮播，回忆我们刚才讲的内容，一共有三组 1.jpg、2.jpg、3.jpg 的照片，默认展示第四张照片，也就是第二组照片中的 1.jpg ，如果点击左按钮，会分别展示第一组照片中的 3.jpg 、2.jpg、1.jpg , 假设一直点击左按钮，展示到第一张照片，也就是第一组的 1.jpg 的时候，此时图片的下标 slideIndex 的值为 0 。当此时展示的图片的下标 slideIndex 的值为 0 并且执行完这个动画的时候，我们需要做一个操作，将 slideImageLists 的 left 值瞬间改变为 -1800px，这个值我们上面强调过了，是初始情况下展示第四张照片也就是第二组中的 1.jpg 的时候 slideImageLists 的 left 值，并且将当前展示的图片的下标 slideIndex 的值变为 3 。
　　animate有一个非常方便的地方在于他提供了一个回调函数，回调函数在动画执行完之后自己执行。
　　另外，这里还有一个需要格外注意的地方，我们一直强调一定要瞬间将 slideImageLists 拉回到 left 值为 -1800px 的地方，那是因为如果也类似于用animate来实现的话用户会看到一个动画的过程，这是我们不能接受的。所以在瞬间拉回的时候我采用的是jQuery的css方法去改变 left 属性。
　　不完美的地方
　　但是讲到这里，实际上还是有不完美的地方，如果你多次点击按钮，就会发生错乱，此时我们需要做的是在动画的执行过程中点击按钮无效，只有动画结束完成才可以继续点击实现动画。我这里采用的方案是引入一个布尔类型的变量 isClickable，初始值为true，表示初始情况下可点击。当用户点击按钮的时候会进行判断当前 isClickable 的值，如果值为true的时候才会去执行 slideIndex-- 的操作，否则会 return false ,不会再执行下面的代码。
　　此时我们来分析一下流程：
　　1. 初始情况下isClickable的值为true，表示当前按钮是可以点击的。
　　2. 此时我们去点击左按钮，isClickable 的值为 true , 会执行slideIndex-- 的操作。并且将 isClickable的值设置为 false，表示现在已经处在动画中。此时再去点击左按钮就无法再执行slideIndex--的操作，而是进入 return false，终止当前代码。
　　3. 需要注意的是，我们需要在动画执行完成后，也就是在回调函数中将 isClickable 的值变为 true，所以当动画结束后再点击按钮的时候就可以进行下一次动画了。
　　具体代码如下：
var isClickable = true;
// 是否可点击，默认可点击
var slideIndex = 3;
$("#slideLeftBtn").on("click",function(){
if(isClickable == true){
slideIndex--;
return false;
isClickable = false;
var animateLength = slideIndex * (-600) + "px";
$(".slideImageLists").animate({"left":animateLength},"slow",function(){
isClickable = true;
if(slideIndex &= 0){
$(".slideImageLists").css({"left":"-1800px"});
slideIndex = 3;
　　以上就是左按钮点击时候的思路，点击右按钮的思路和点击左按钮的思路是一样的，相信聪明的你一定能够一点即通，有问题欢迎大家和我交流。
　　祝工作顺利 ~
Views(...) Comments()母亲节首页轮播海报设计，葡萄干盛大开业海报轮播设计，童鞋直通车图设计。
母亲节首页轮播海报设计
葡萄干盛大开业海报轮播设计
童鞋直通车图设计
可以记录推荐数据哦！
收录收藏夹
转行第六周，母亲节首页轮播海报设计，葡萄干盛大开业海报轮播设计，童鞋直通车图设计。
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友亲，你好吗？ 求助啊~~微博首页轮播图怎么添加啊~
全部答案（共4个回答）
版本微博，可以图片轮播，具体的，可以私信微博客服咨询了解一下哦。【帅哥！美女！如果对您有帮助，给我的答案一个好评哦^^,谢谢,亲】
管理中心 个人设置 勾选即可
点击最上边栏——应用 里面有微博读书
想必大家一定厌倦了那个一成不变的枯燥无味的背景图片了吧？那怎么能够显示出我们的个性与品位呢？现在就让我们来换换新的视觉享受吧！
这是源代码：
操作方法:控制...
更换页面题图logo图片的源代码：
{b (博客最上方题图logo图片) no
repeat no scroll!}
目前在个人页面加入百度百科的功能目前处于测试阶段，具体的你可以咨询一下微博客服，目前这个应该是没法进行添加的
答: 如何自己在微信上投票？微信投票什么价格？
答: 网络和软件都很不错的 还可以根据你自己的情况来选择 如果你英语和高数不错的话 可以学软件 如果都不是很理想的话 可以选择网络啊 我认为网络还是不错的 网络工程师...
答: 你是问故障还是问安装方面的？
你用的是工行的卡吗？到工行网站问了一下，下面是它们版主的回答——您好～
1、您可以拨打95588或通过网上银行等渠道查询消费明细。
2、若您的信用卡开通了网上银行。请您按照以下地址进行登录。工行网站地址： 点击“个人网上银行登录”或工行个人网上银行地址： 按照系统提示输入相关信息后即可登录。
“网页错误”请您进行以下操作：
（1）打开IE浏览器，选择“工具”菜单--&“Internet选项”--&“高级”标签--&点击“还原默认设置”，点击“确定”后关闭所有IE浏览器窗口；
（2）打开IE浏览器，选择“工具”菜单--&“Internet选项”--&“常规”标签--&Internet临时文件设置中的“检查所存网页的较新版本”选择“每次访问此页时检查”。并在Internet临时文件设置中点击“删除文件”，在“删除所有脱机内容”前打勾后点击确定关闭对话框，关闭所有IE窗口；
（3）打开IE浏览器，选择“工具”菜单--&“Internet选项”--&“安全”标签，在“请为不同区域的Web内容制定安全设置（z）”窗口内选择“Internet”，然后选择“自定义级别”，将“Activex控件和插件”中“下载已签名的Activex控件”、“运行Activex控件”等设置为“启用”或“提示”，点击确定后，请重新启动电脑；
（4）若您安装了3721上网助手之类的软件，请您将其完全卸载；
（5）请登录工行门户网站 ，点击“个人网上银行登录”下方的“下载”。进入下一个页面后，下载并安装控件程序。
（6）若仍无法正常使用，建议您重新安装IE6.0或以上版本的IE浏览器，并使用WINDOWS系统的UPDATE功能安装补丁。
3、您可以通过网上银行查看对账单进行还款。
4、是可以的。您需要通过网上银行办理跨行转账业务。
如果您想在网上办理跨行汇款，请使用“工行与他行转账汇款”功能，您除了需要申请开通网上银行对外转账功能，还需要您所在地区开通网上跨行汇款功能。若未开通，那么在操作时系统会提示您的（国际卡及香港信用卡无法使用此功能）。
从日起，柜台注册且未申请U盾或口令卡的客户，单笔交易限额、日累计限额以及总支付交易限额均为300元，9月1日前支付额度已经达到300元的客户需到网点申请电子口令卡或U盾（从注册日起计算支付额）。
若目前已达到交易限额但急需支付，建议您可通过下列方法变更交易限额：
1.申请U盾。u盾客户不再受交易限额和支付次数的限制。此外，使用u盾，您可以享受签订理财协议等服务项目，并在您原有使用基础上大大加强了安全性。如需办理U盾，请您本人携带有效身份证件和网上银行注册卡到当地指定网点办理U盾，办理手续及网点信息请您当地95588服务热线联系咨询。
2.申办口令卡。您本人可持有效身份证件、网上银行注册卡到当地指定网点申办口令卡。申办电子口令卡后，个人网上银行单笔交易限额1000元；日累计交易限额5000元，没有总支付额度控制；电子银行口令卡的使用次数为1000次（以客户输入正确的密码字符并通过系统验证为一次），达到使用次数后即不能使用，请及时到我行营业网点办理申领新卡手续。
我个人认为解放后初期的土改，是农民分得了土地，而不是租土地。明确来说，当时的土改就是农民私有。我认为，当时可能是出于对“私有制”的忌讳，所以不敢直接声称是“私有”，而是用“农民的”来代替。
之所以说当时是私有，理由大致如下：
1.土改，准确来说是对生产资料的重新分配。当时参与土改的生产资料，不但包括土地，还包括牛马驴骡、农具等生产资料。而这些都是属于农民私有的。后来合作化运动之前，有些农民就曾经把牛马等牲口杀了吃肉，政府当时也只是批评他们的思想，并没有强力阻止。可见这些生产资料的确是属于私有的。
2.在一些地方的土改总结中，曾经对各阶层的土地分配量进行过汇总。在土改中，也并不是全部重新分配。例如富农和中农的土地都得到了一定保护。因此，可以推断，平均地权后的土地拥有量，仍然不是完全平等的。而如果是土地公有，那么富农中农的土地也应当予以重新分配。
3.合作化运动期间，鼓动农民用土地入股，参与合作组。如果土地不是农民私有的，那么“用土地入股”之说从何谈起？只有土地是农民私有的，才能够用“自愿”和“入股”等口号来鼓动农民。
4.当农业社会主义改造结束后，官方曾经明确认定是：把农民的土地所有制改造为集体所有制。我们知道，集体所有制才是真正具有公有制意义的，既然集体所有制是刚改造成立的，那么此前就不应该是公有制，否则也就没有这么大的政治意义了。所以，被改造之前，应当是私有制。
5.据说薄一波在《若干重大历史问题和回顾》中曾经提到：如果土改结束后，继续实行新民主主义，不急于把私有制改造为公有制，那么可能就没有后来的这么多错误。（原话记不清了，大体是这个意思）可见，当时党内高层，也是把农民所有制认定为私有制。
6.参照当时的工业情况。土改期间的工业依然是存在私有制的。直到合作化运动后，才逐渐兼并了私有企业。工业合作化期间，也曾经采用了“入股”“分红”“自愿”等手法，这和农业合作化方式是一致的。很难想像，如果农村当时真的消灭了私有制，那么这些私人企业家怎么还能够放心生产下去。所以我认为，当时的土改只能是建立了农民私有制，这样才能让私人企业家吃一个定心丸，不至于立马停工逃跑。
土地是否拥有私有权，很大程度上要看土地拥有者是否能够自由买卖土地。但是土改初期，一来，地主的财富基本被瓜分完毕；二来，地主即使留下一点财富，也决计不敢表露自己还藏有私钱；三来，刚分得土地的农民没有钱去购买土地。从而使得当时的地主无地可卖，无地敢买；农民不愿卖地，没钱买地。因此造成几乎没有土地买卖的可能性。既然没有土地买卖，其私有权也相对体现的并不明显。
不过从上述种种理由来看，虽然土地买卖并不明显，但并不能认为当时就不是私有制。土改结束后，农民的劳动积极性大大提高，当年的农业产量得到了大幅增长。在当时没有提出承包概念，没有明确承包年限的情况下，如果不是私有制，很难想像农民会有这么大的劳动积极性。要知道，三中全会后，也是明确了足够的承包年限后，农民才具有较高的积极性。如果建国初期的土改是公有制或集体所有制的，在没有承包年限的承诺下，我不太相信农民会有足够的劳动积极性。
有2个拉电子基团啊，怎么稳定，联想一下“五马分尸”~~
问：住房公积金的缴存是否是强制的？
答：住房公积金的缴存是强制的，符合缴存条件（外省市城镇常住户口职工、个体工商户、自由职业者除外）的单位和个人必须根据住房公积金的相关法律法规依法缴纳住房公积金。
住房公积金缴存的对象和范围是什么？
答：按照国务院《住房公积金管理条例》规定，住房公积金缴存对象为本市的国家机关、国有企业、城镇集体企业、外商投资企业、城镇私营企业及其他城镇企业、事业单位、民办非企业单位、社会团体以及与上述类型单位有劳动关系的，具有本市城镇常住户口的在职职工，另外，在本市参加工作的外省市城镇常住户口职工、个体工商户、自由职业者也可以参加本市住房公积金制度。
问：住房公积金的缴存比例和缴存额上下限如何确定？月缴存额如何计算？
答：住房公积金的缴存比例和缴存额上下限，每年由市公积金管理中心会同有关部门提出，经市住房公积金委员会审核同意，并报市人民政府批准后公布执行。住房公积金的月缴存计算方式为，职工本人上一年度的月平均工资乘以职工、单位的住房公积金缴存比例之和，职工住房公积金月缴存额计算到元，元以下四舍五入。
考虑是由于天气比较干燥和身体上火导致的，建议不要吃香辣和煎炸的食物，多喝水，多吃点水果，不能吃牛肉和海鱼。可以服用（穿心莲片，维生素b2和b6）。也可以服用一些中药，如清热解毒的。
确实没有偿还能力的，应当与贷款机构进行协商，宽展还款期间或者分期归还； 如果贷款机构起诉到法院胜诉之后，在履行期未履行法院判决，会申请法院强制执行； 法院在受理强制执行时，会依法查询贷款人名下的房产、车辆、证券和存款；贷款人名下没有可供执行的财产而又拒绝履行法院的生效判决，则有逾期还款等负面信息记录在个人的信用报告中并被限制高消费及出入境，甚至有可能会被司法拘留。
第一步：教育引导
不同年龄阶段的孩子“吮指癖”的原因不尽相同，但于力认为，如果没有什么异常的症状，应该以教育引导为首要方式，并注意经常帮孩子洗手，以防细菌入侵引起胃肠道感染。
第二步：转移注意力
比起严厉指责、打骂，转移注意力是一种明智的做法。比如，多让孩子进行动手游戏，让他双手都不得闲，或者用其他的玩具吸引他，还可以多带孩子出去游玩，让他在五彩缤纷的世界里获得知识，增长见识，逐渐忘记原来的坏习惯。对于小婴儿，还可以做个小布手套，或者用纱布缠住手指，直接防止他吃手。但是，不主张给孩子手指上“涂味”，比如黄连水、辣椒水等，以免影响孩子的胃口，黄连有清热解毒的功效，吃多了还可导致腹泻、呕吐。
合肥政务区网络广告推广网络推广哪家公司比较好 一套能在互联网上跑业务的系统，被网络营销专家赞为目前最 有效的网络推广方式！
1、搜索引擎营销：分两种SEO和PPC，即搜索引擎优化，是通过对网站结构、高质量的网站主题内容、丰富而有价值的相关性外部链接进行优化而使网站为用户及搜索引擎更加友好，以获得在搜索引擎上的优势排名为网站引入流量。
良工拥有十多位资深制冷维修工程师，十二年生产与制造经验，技术力量雄厚，配有先进的测试仪器，建有系列低温测试设备，备有充足的零部件，包括大量品牌的压缩机，冷凝器，蒸发器，水泵，膨胀阀等备品库，能为客户提供迅捷，优质的工业冷水机及模温机维修和保养。
楼主，龙德教育就挺好的，你可以去试试，我们家孩子一直在龙德教育补习的，我觉得还不错。
成人可以学爵士舞。不过对柔软度的拒绝比较大。　　不论跳什么舞，如果要跳得美，身体的柔软度必须要好，否则无法充分发挥出理应的线条美感，爵士舞也不值得注意。在展开暖身的弯曲动作必须注意，不适合在身体肌肉未几乎和暖前用弹振形式来做弯曲，否则更容易弄巧反拙，骨折肌肉。用静态方式弯曲较安全，不过也较必须耐性。柔软度的锻炼动作之幅度更不该超过疼痛的地步，肌肉有向上的感觉即可，动作(角度)保持的时间可由10馀秒至30-40秒平均，时间愈长对肌肉及关节附近的联结的组织之负荷也愈高。
正在加载...
Copyright &
Corporation, All Rights Reserved
确定举报此问题
举报原因(必选)：
广告或垃圾信息
激进时政或意识形态话题
不雅词句或人身攻击
侵犯他人隐私
其它违法和不良信息
报告，这不是个问题
报告原因(必选)：
这不是个问题
这个问题分类似乎错了
这个不是我熟悉的地区
相关问答：12345当前位置：
母亲节康乃馨风格轮播广告图片
原创共享素材
编号：上传时间：大小：3.041 M
尺寸：0×0像素 格式：CDR (X4)颜色：RGB
关&键&词：母亲节 康乃馨 妈妈 母亲 mather mun 幸福 快乐 健康 关爱 我爱你 爱心 传单 广告 驾校 网页 web 网站 轮播广告 banner 红色 怀旧 风格 宣传画 510 2015最新版 CDR
web界面设计 中文模板
作品描述：传单 驾校 劳动节 轮播广告 banner 红色革命 怀旧风格 宣传画 51 五一 2015最新版 革命 红色起义 主题 设计 广告设计 DM宣传单 CDR
&昵图网所有作品均是用户自行上传分享并拥有版权或使用权，仅供网友学习交流，未经上传用户书面授权，请勿作他用。若您的权利被侵害，请联系 。
商用正版图片}