自定义幻灯片
其实说实话，掌握了制作幻灯片的逻辑，和方法，那么脑海中能够想到的幻灯片效果大部分其实都可以实现的。
我们现在要定义的幻灯片是这样的
一个图片幻灯片展示区，和一个底部时间轴指示器。这个例子中有三张图轮播，那么当指示器时间轴跑到1/3的时候，切换第二张，当跑到2/3的时候，切换第三张，当时间轴跑完的时候切换回第一张，同时时间轴从0开始继续跑。可以在脑海中想象一下这个效果，还是蛮不错的吧。
还是老套路，上布局html
<div id="img_tab"> <ul> <li><p>图片一</p></li> <li><p>图片二</p></li> <li><p>图片三</p></li> </ul> <div id="timeline"><span></span></div> </div>
实在是太简单了，布局就这么简单，图片轮播部分三个li，然后时间轴部分里面包裹一个span，相信聪明的朋友知道时间轴是们回事，其实就是span的宽度。
接下来就是看看css部分吧，由于图片轮播不分模拟的是节操精选首页幻灯片的切换效果，是可以用css3实现的，不同的渐隐渐显不太好玩了，左右切换也不新鲜，所以换种效果还是蛮好玩的。
动手能力强的同学可以复制源码过去，看看效果之后自己实现。
#img_tab{width:100%; height:323px; background:#EEE;} #timeline{width:100%; height:3px; background:#FFF;} #timeline > span{display:block; width:0; height:3px; background:#F00;box-shadow:0 0 5px #F00;} #img_tab ul{width:100%; height:300px; overflow:hidden;} #img_tab ul li{ width:100%; height:0px; overflow:hidden; /*border-radius:5px;*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #img_tab ul li p{ width:100%; height:50px; background:rgba(0,0,0,0.3); color:#FFF; text-align:center; line-height:50px;} #img_tab ul li:nth-child(1){ background:url(images/1.jpg) center;background-size:100%;} #img_tab ul li:nth-child(2){ background:url(images/2.jpg) center;background-size:100%;} #img_tab ul li:nth-child(3){ background:url(images/3.jpg) center;background-size:100%;} #img_tab ul li.activ{ height:300px;}
布局好之后就是上js逻辑了，看大招，别激动，哥哥也是js菜菜，没有jq是在做不出来像样的效果，原生的js手抖。哈哈，所以还是用下jquery吧。
<script src="js/jquery-1.7.2.min.js"></script>
千万别忘记，然后才是正菜
$(function(){ $("#img_tab > ul >li").eq(0).addClass("activ"); var index = 0; var num = $("#img_tab > ul >li").length; $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000); var timer = setInterval(autoPlay,5000); function autoPlay(){ if(index<num-1){ index++; if(index===num-1){//当进度条跑完的时候拉回0 $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000,function(){ $("#timeline >span").css({"width":0}); }); }else{ $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000); } } else{ index = 0; $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000); } $("#img_tab > ul >li").removeClass("activ"); $("#img_tab > ul >li").eq(index).addClass("activ"); } });
我靠，不写注释的程序猿正的不是个好程序员啊，好吧，我讨厌自己这样子，还好是个简单的逻辑，定时器之前都是初始化过程，定时器之后就是真正跑的逻辑
设置一个定时器，每5s让index++，如果index<2;index++;然后让对应index的图片高度300，其他高度为0；然后时间轴跑到对应index/3的宽度，注意时间轴运动的时间也是5s。跟定时器的时间是一样的。
最后注意的一点就是当index===2的时候，时间轴运动到100%之后记得把时间轴拉回到0 的位置。
最后上个全码，复制粘贴过去就ok
<!doctype html> <html> <head> <meta charset="utf-8"> <!--屏幕适配--> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>自定义幻灯片</title> <style> *{margin: 0; padding:0; list-style: none; font-size: 100%; font-family: "微软雅黑";} html{font-size: 62.5%;} body{width: 100%; height: 100%; background:#EEE;} #img_tab{width:100%; height:323px; background:#EEE;} #timeline{width:100%; height:3px; background:#FFF;} #timeline > span{display:block; width:0; height:3px; background:#F00;box-shadow:0 0 5px #F00;} #img_tab ul{width:100%; height:300px; overflow:hidden;} #img_tab ul li{ width:100%; height:0px; overflow:hidden; /*border-radius:5px;*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #img_tab ul li p{ width:100%; height:50px; background:rgba(0,0,0,0.3); color:#FFF; text-align:center; line-height:50px;} #img_tab ul li:nth-child(1){ background:url(images/1.jpg) center;background-size:100%;} #img_tab ul li:nth-child(2){ background:url(images/2.jpg) center;background-size:100%;} #img_tab ul li:nth-child(3){ background:url(images/3.jpg) center;background-size:100%;} #img_tab ul li.activ{ height:300px;} </style> <script src="js/jquery-1.7.2.min.js"></script> <script> $(function(){ $("#img_tab > ul >li").eq(0).addClass("activ"); var index = 0; var num = $("#img_tab > ul >li").length; $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000); var timer = setInterval(autoPlay,5000); function autoPlay(){ if(index<num-1){ index++; if(index===num-1){//当进度条跑完的时候拉回0 $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000,function(){ $("#timeline >span").css({"width":0}); }); }else{ $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000); } } else{ index = 0; $("#timeline >span").animate({"width":1/num*(index+1)*100+"%"},5000); } $("#img_tab > ul >li").removeClass("activ"); $("#img_tab > ul >li").eq(index).addClass("activ"); } }); </script> </head> <body> <div id="img_tab"> <ul> <li><p>图片一</p></li> <li><p>图片二</p></li> <li><p>图片三</p></li> </ul> <div id="timeline"><span></span></div> </div> </body>
li的背景是图片，所以为了直接在你浏览器里直接跑起来，背景换成颜色，然后，引入jquery,你就能看到效果了。
注明，本人js/css3特效痴迷者，有喜欢交流的，可以qq/503305196。
版权声明：本文为HDou原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。