js特效之无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
<style>
*{
    padding:0px;
    margin:0px;
}/*这个如果不写的话在火狐中会有差错,<ul>不在<div>内*/
#div1{
    position:relative;/*父级用了相对定位,子级才能使用绝对定位*/
    height:200px;
    width:800px;
    background:#666;
    margin:212px;/*让效果紧挨顶部*/
    overflow:hidden;
}
#div1 ul{
    left:0px;
    top:0px;
    position:absolute;
}
#div1 ul li{
    list-style-type:none;/*去掉<li>前面的点*/
    float:left;
    width:200px;
    height:200px;
}

</style>
<script>
window.onload=function(){/*必须写的内容,读取全部之后在执行下面的语句*/
    var oDiv=document.getElementById('div1');/*获取<div>的ID*/
    var oUl=oDiv.getElementsByTagName('ul')[0];/*注意不是document而是div,还要获取第一个<ul>*/
    var aLi=oUl.getElementsByTagName('li');/* 同上*/
    
    speed=-2;
    oUl.innerHTML+=oUl.innerHTML;让/*<ul>下面的<li>翻倍,更容易控制*/
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';/*把改变后的<ul>的宽度获取出来,设置出来*/
    
    function Move(){/*由于下面的定时器中有有两个所以不再定时器里面写函数在外面定义一个*/
        if(oUl.offsetLeft>0){//这是向右走,如果最后一个图片都出来的话,哪重新开始
            oUl.style.left= -oUl.offsetWidth/2+'px';
        }//变为全部长度的一半
        //下面的是向左走,如果
        if(oUl.offsetLeft < -oUl.offsetWidth/2){
            oUl.style.left='0';
        }
        oUl.style.left=oUl.offsetLeft+speed+'px';
    }
    timer=setInterval(Move,30);//定义一个定时器
    oDiv.onmouseover=function(){//当鼠标移入的时候
        clearInterval(timer);//关闭定时器
        //speed=0;
    }
    oDiv.onmouseout=function(){
        //speed=2;
        timer=setInterval(timer);
    }
    
    document.getElementsByTagName('a')[0].onclick=function(){//全局下获取第一个a标签
        speed=-2;
    }
    document.getElementsByTagName('a')[1].onclick=function(){
        speed=0;
    }
    document.getElementsByTagName('a').onclick=function(){
        speed=2;
    }
}

</script>
</head>

<body>
<a href="###">left</a>
<a href="###">pluse</a>
<a href="###">right</a>
<div id="div1">
    <ul>
        <li><img src="dream/images/con_bot_4.jpg" width="200" height="200"></li>
        <li><img src="dream/images/button_front_1.jpg" width="200" height="200"></li>
        <li><img src="dream/images/con_bot_3.jpg" width="200" height="200"></li>
      <li><img src="dream/images/con_left_mid_pic_3.jpg" width="200" height="200"></li>
    </ul>
</div>


</body>
</html>


把图片的路径改一下就是一个很好的无缝滚动了

你可能感兴趣的:(JavaScript,js,w3c)