您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 焦点图 >

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

    时间:2014-06-27 08:33 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    效果预览 进入下载地址列表

    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>

    js淘宝幻灯片上下滑动效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jiaodiantu/9725.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!