首页

源码搜藏网

首页 > 网页特效 > 焦点图 >

js淘宝幻灯片上下滑动效果

创建时间:2014-06-27 08:33  

js淘宝幻灯片上下滑动效果
js淘宝幻灯片上下滑动效果
效果预览 立即下载

js淘宝幻灯片上下滑动效果js淘宝幻灯片上下滑动效果是一款原生态纯js仿淘宝幻灯片轮播切换效果代码。js上下滑动数字按钮自动切换 所属专题:幻灯片代码


<script src="js/move.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var aBtn=oDiv.getElementsByTagName("ol")[0].getElementsByTagName("li");
var oUl=oDiv.getElementsByTagName("ul")[0];
var now=0;
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
now=this.index
tab();
}
}
function tab(){
for(var j=0;j<aBtn.length;j++){
aBtn[j].className="";
}
aBtn[now].className='actived';
move(oUl,{top:-360*now});
}
function next(){
now++;
if(now==aBtn.length){
now=0;
}
tab();
}
var timer=setInterval(next,5000);
oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(next,5000)
}
}
</script>

上一篇:mtime时光网宽屏焦点图
下一篇:jQuery实用淡入淡出幻灯片

相关内容

热门推荐