新闻切换特效

<script type="text/javascript">
var currIndex = 1;
//当前显示的新闻的下标
function init(){
var length = 5;
//定义一共有多少新闻
for(var i = 0; i < length; i++){
//为新闻加上对应的右下角按钮
document.getElementById('slideshow_footbar').innerHTML 
+= '<div class="slideshow-bt" index="'+(length-i)+'"></div>';
}
//得到按钮的DOMs
var btns = document.getElementsByClassName('slideshow-bt');
btns[length-1].className += 'bt-on';
//默认情况下，第一个按钮是被选中的
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
//当按钮被按下时，就触发划动新闻的事件
slideTo(this.attributes['index'].value);
};
}
setInterval(function(){
if(currIndex + 1 > 5)
currIndex = 0;
slideTo(currIndex + 1);
}, 3000);
}
function slideTo(index){
//显示指定下标的新闻
index = parseInt(index);
//解析得到坐标的数字
//得到图片区域的所有子元素
var picArr = document.getElementById('slideshow_photo').childNodes;
for(var i = 0; i < picArr.length; i++){
if(picArr[i].attributes
//判断是否为图片元素，以及是否与index一致
&& picArr[i].attributes['index']
&& parseInt(picArr[i].attributes['index'].value == index)){
picArr[i].style.zIndex = 2;
currIndex = index;
//设定当前的下标
}else if(picArr[i].attributes
//如果不是要显示的新闻，则放在下层
&& picArr[i].attributes['index']){
picArr[i].style.zIndex = 1;
//设置较小的z-index值
}
}
}
//修改小按钮的样式
var btns = document.getElementsByClassName('slideshow-bt');
for(var i = 0; i < btn.length; i++){
// 发现对应index的小按钮
if(parseInt(btns[i].attributes['index'].value == index){
// 设置当前的样式
btns[i].className = 'slideshow-bt bt-on';
}else{
btn[i].className = 'slideshow-bt';
//其他小按钮则是默认样式
}
}
</script>