js功能实现top轮播图

2021-07-12 14:06

阅读:710

标签:方式   on()   interval   style   滚动   osi   src   图片   function   

 作用:向左滚动的轮播图
参数:主容器的id
调用方式:直接拷贝调用方法
function autoPlay(id){
var scroll=document.getElementById(id);
var ul=scroll.children[0]
var num=0
var timer=null;
timer=setInterval(autoGoing,20); //滚动轴方法
function autoGoing(){
num--;
num
ul.style.left=num+"px";
}
scroll.onmouseover=function(){ //鼠标悬停停止滚动
clearInterval(timer)
}
scroll.onmouseout=function(){ //鼠标移开 继续滚动
timer=setInterval(autoGoing,20);
}
}
 
参考标签:
  •  
    参考样式:
    *{margin: 0;padding: 0;}
    ul{list-style: none;}
    img{
    vertical-align: top; /*取消三个图片底部像素距离*/
    }
    .box{
    width: 600px;
    height: 200px;
    margin: 100px auto;
     
    position: relative;
    overflow: hidden;
    }
    .box ul li {
    float: left;
    }
    .box ul{
    width: 400%;
    position: absolute;
    left: 0;
    top: 0;
    }
    ------------------------------------------------------------------------------------------------------------------------

     

    js功能实现top轮播图

    标签:方式   on()   interval   style   滚动   osi   src   图片   function   

    原文地址:http://www.cnblogs.com/EVNS/p/7082008.html


    评论


    亲,登录后才可以留言!