想实现一个图片幻灯片效果,可从上至下翻滚,到最后一张时可以回到第一张.
我的代码如下:
var S=SlideNews={
current:0,
next:0,
scrollInterval:0,
autoScroller:0
};
SlideNews.turn=function(index){
clearInterval(SlideNews.autoScroller);
SlideNews.scroll(index);
}
SlideNews.scroll=function(index){
if(!document.getElementsByID('editorial_block_logo_item')){
clearInterval(SlideNews.autoScroller);
return;
}
var count=0;
var step=228;
var duration=16;
var s=SlideNews;
s.next=index;
if(index!=s.current&&count>duration/8){
return;
}
clearInterval(s.scrollInterval);
var items=document.getElementsByID('editorial_block_logo_item').getElementsByTagName('li');
for(var i=0;i<3;i++){
items[i].className='';
}
items[index].className='up';
var span=index-s.current;
var begin_value=document.getElementsByID('editorial_block_logo_img').scrollTop;
var chang_in_value=span*step+(s.current*step-begin_value);
s.scrollInterval=setInterval(function(){doit(begin_value,chang_in_value)},10);
function doit(b,c){
document.getElementsByID('editorial_block_logo_img').scrollTop=cpu(count,b,c,duration);
count++;
if(count==duration){
clearInterval(SlideNews.scrollInterval);
scrollInterval=0;
count=0;
document.getElementsByID('editorial_block_logo_img').scrollTop=b+c;
SlideNews.current=index;
}
}
function cpu(t,b,c,d) {return c*((t=t/d-1)*t*t+1)+b;};
}
SlideNews.auto=function(){
clearInterval(SlideNews.autoScroller);
SlideNews.autoScroller=setInterval(function(){
SlideNews.scroll(SlideNews.current==2?0:SlideNews.current+1);
},5000);
}
window.attachEvent('onload',SlideNews.auto);使用mouseover(turn(index)),mouseout(auto())来调用.