js 多动画轮播效果
图片：轮播.jpg
如图，所示的轮播，不但要切换大的背景图，还有文字及其它一些图片，也要动画显示。
当然，这个效果的实现，网上有类似的插件. 不过，也可以自己写出来. 下面我们就一起来看看。燥起来吧！！！
第一步：
大家暂时不要考虑动态这些的，就是把要轮播的页面及内容，全部显示出来.
( 注：轮播一般也称幻灯片播放，下面，我们就把每一次图片的切换，称为幻灯片的切换，每一张幻灯片就用一个LI来实现，而每个幻灯片里还可以包含其它信息，文字，图片都可以，将它们用div包起来，然后，用class来指定样式，让它显示到对应的位置 )
如下：
HTML代码：
<ul>
<li thumb="img/wide1.jpg">
<div class="li1sub1"><img src="img/rb.png"/></div>
<div class="li1sub2"><img src="img/inspira.png"/></div>
<div class="li1sub3">my name is doubleyong</div>
<div class="li1sub4"><a href="#">purcharse</a> </div>
</li>
</ul>
第二步：将每一张幻灯片的背景显示出来
这里不需要将每个幻灯片添加样式，通过在li上添加thumb属性来指定背景图片的地址，然后通过JS来添加背景图片
代码如下（JS）：
var liarr = document.getElementById("banner").getElementsByTagName("li");
for(var i=0;i<liarr.length;i++){
var imgSrc= liarr.getAttribute("thumb"); liarr.style.backgroundImage='url('+imgSrc+')';
}
第三步，就可以来做幻灯片的切换
1. 定义两个全局变量
var timerArr= []; // 存储定时器的数据，每一张幻灯片各种动画的定时器对象
var currentSolid = 0; //当前显示的幻灯片，从0开始数
2. 显示第几张幻灯片调用的方法
//显示第几张幻灯片，num为显示的幻灯片数字，从0开始计算
function current(num){
hide(); //先把所有的幻灯片隐藏
clearTimer(); //清空之前的所有定时器
liarr[num].style.display="block"; //将要显示的那张幻灯片显示出来
// 上面，实现了显示了大的背景图片切换，但除此这外还有其它的内容，并且，还有动效，那如何来完成？
// 重点分析：动效，其它就是开始是一个样式，最终是另一个样式，然后，在样式的改变过程中，加上过渡效果即可
// 最终一个样式，已经通过class来进行了定义，下面只需要设置，每一张幻灯片里的子元素的开始样式就好，即如何设置？
// 通过在标签添加属性的方式来实现
var childArr = liarr[num].getElementsByTagName("div");
for(var i =0 ;i<childArr.length;i++){
childArr.style.top = childArr.getAttribute("data-y")+"px"; //设置元素的开始位置，在元素中的属性获得
childArr.style.left = childArr.getAttribute("data-x")+"px"; //设置元素的开始位置，在元素的属性中获得
//注：这里很多的值，来源于元素的属性，所以，HTML代码中，将会进行一些添加，加上需要的数据, 详细查看后面HTML修改后
childArr.style.opacity = 0;
var startTime =childArr.getAttribute("data-start"); //开始时间，也是在属性中设置
//注：此setTimeout 实现了传递参数，详情参考：http://bugshouji.com/shareweb/t84-1
var timer =setTimeout(annimal(childArr),parseInt(startTime));
//添加定时器，在指定时添加指定方法，只调一次
timerArr.push(timer); //将定时器放到数组中
}
}
//执行动画效果的方法
function annimal(ele){
return function(){ //返回一个函数，让setTimeout执行
var speed = ele.getAttribute("data-speed")/1000; //得到动态时间，在元素属性中获得
ele.style.transition = "all "+speed+"s linear"; //添加过渡效果
ele.style.opacity = 1;
ele.style.top="";
ele.style.left="";
//注，上面这两个清空，不是简单的清空了样式里的值,因为style是行内样式，指定时它的优先级高于class,
//这时会应用style里的样式，而我们清空样式里设置的值，这里就将应用class里设置的值
//这就是一个亮点，通过style属性的设置，来达到两种不同样式的应用
}
}
// 隐藏所有的幻灯片
function hide(){
for(var i=0;i<liarr.length;i++){
liarr.style.display="none";
}
}
//清空之前的所有定时器
function clearTimer(){
for(var i=0;i<timerArr.length;i++){
clearTimeout(timerArr);
}
timerArr.length=0;
}
因，上面的方法，需要在HTML中设置相关的一些属性，所以，HTML做了以下修改，如下：
<li thumb="img/wide1.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rb.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/inspira.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">my name is doubleyong</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">purcharse</a> </div>
</li>
<span "="" color:#548dd4=""> （有多少张，就添加多少项，里面的内容也可以设置多个,注：按钮相应的要求来指定开始位置; js代码就不能修改,只需要在HTML添加对应的元素即可）.
<li thumb="img/wide1.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rb.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/inspira.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">my name is doubleyong</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">purcharse</a> </div>
</li>
<li thumb="img/wide2.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/lightweight.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/macbook.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">哇，动效出来了，好开心</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">开心</a> </div>
</li>
<li thumb="img/wide3.jpg">
<div class="li1sub1" data-x="-100" data-y="50" data-speed="300" data-start="300"><img src="img/rm.png"/></div>
<div class="li1sub2" data-x="350" data-y="-50" data-speed="300" data-start="800"><img src="img/bootstrap.png"/></div>
<div class="li1sub3" data-x="350" data-y="-50" data-speed="500" data-start="1200">Bang bang bang</div>
<div class="li1sub4" data-x="350" data-y="-50" data-speed="800" data-start="1500"><a href="#">嗨起来</a> </div>
</li>
摘选自：http://www.bugshouji.com/zhuopingweb/t85
