图片:轮播.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