应用JavaScript搭建一个简易页面图片无缝滚动效果

　　页面图片无缝滚动JavaScript原理：移动的区块包含图片内容，区块相对父级元素进行定位脱离文档流。再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动。由于每次间隔移动的时间设置很短，会“欺骗”人的眼睛，形成无缝滚动效果。

　　脱离文档流：父元素为相对定位position:relative，区块为绝对定位;position:absolute。

　　每隔固定时间进行left的变化：使用函数setInterval();

　　设置HTML文档以及样式：

　　滚动区域宽度=图片宽度x图片数目

　　178x4=712

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
    margin:0;
    padding:0;
    }
#div1{
    width:712px;
    height:108px;
    margin:100px auto;
    overflow:hidden;
    position:relative;
    background:red;
    }
#div1 ul{
    position:absolute;
        width:inherit;
    left:0;
    top:0;

    }

#div1 ul li{
    float:left;
    width:178px;
    height:108px;
    list-style:none;
    }
img{
    width:inherit;
    height:;
    }
    

</style>
<script>
</script>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="./实验_files/狼.jpg"></li>
        <li><img src="./实验_files/兔子.jpg"></li>
        <li><img src="./实验_files/熊猫.jpg"></li>
        <li><img src="./实验_files/狐狸.jpg"></li>
    </ul>
</div>
</body>
</html>

应用JavaScript搭建一个简易页面图片无缝滚动效果

　　基础的JavaScript代码：

window.οnlοad=function()
{
    var oDiv1=document.getElementById("div1");
    var oUl=oDiv1.getElementsByTagName("ul")[0];
    var aLi=oDiv1.getElementsByTagName("li");
    //oUl的left值为当前获取的left值减去2px
    function move()
    {
        oUl.style.left=oUl.offsetLeft-2+'px';    
    }
    setInterval(move(),100);    
};

　　【问题：在JavaScript中，函数是否带括号有什么区别?】

　　在向左移动后露出oDiv，图片截断，没有连续性。解决方案：oUl内的li元素在原有基础上增加1倍，并且根据新的li的宽度重新设计oUl的宽度值。在oUl的left值减少至一个oDiv1宽度值时(刚好四个图片偏移完毕)，令其left值归零，重新开始oUl的left值偏移。

　　增加后的JavaScript代码：

window.οnlοad=function()
{
    var oDiv1=document.getElementById("div1");
    var oUl=oDiv1.getElementsByTagName("ul")[0];
    var aLi=oDiv1.getElementsByTagName("li");
    //li的数目翻倍
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    //oUl的宽度重新计算
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    /*判断若oUl已经偏移一次完毕（未增加li以前的宽度），那么令oUl的left值归零，否则left值就在当前的基础上加2px*/
    function move()
    {
        if(-oUl.offsetLeft>=oUl.offsetWidth/2)
        {
            oUl.style.left=0;
        }
        else
        {
            oUl.style.left=oUl.offsetLeft-2+'px';    
        }
    }
    setInterval(move,100);                       
};

　　(1)此例中的offsetLeft为负值，比较需要注意正负号。oUl.offsetLeft>=712的写法就是没有考虑其值为负，虽然没有语法上的错误，但是逻辑上if的条件判断就是失效了;

应用JavaScript搭建一个简易页面图片无缝滚动效果

　　向左移动的无缝滚动已经完毕。倘若需要向右滚动呢?

    function move()
    {
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+'px';
        }
           oUl.style.left=oUl.offsetLeft+2+'px';    
    }
    setInterval(move,100);

　应用JavaScript搭建一个简易页面图片无缝滚动效果

　(2)oUl的oUl.style.left=-oUl.offsetWidth/2+'px'中忘了写'px'导致代码无法正常运行，但是控制台不报错。

　　(3)明明HTML的排序布局，ul都是以左边对齐div元素的左边，为什么在向右滚动时，开始会变成以右边对齐div元素的右边?到底是什么改变了布局?

　　鼠标移入图片，滚动立即停止，鼠标移出图片，滚动继续。JavaScript代码：

function move()
    {
        if(-oUl.offsetLeft>oUl.offsetWidth/2)
        {
            oUl.style.left='0';
        }
        oUl.style.left=oUl.offsetLeft-2+"px";
    }
    var timer=setInterval(move,100);
    
    oDiv1.onmouseover=function()
    {
        clearInterval(timer);            
    }

    oDiv1.onmouseout=function()
    {
        timer=setInterval(move,100);    
    }

　　(4)js的变量赋值为函数时，变量定义的函数是否立即被执行，譬如：var timer=setInterval(move,100);？

　　实现点击按钮，控制图片的左右滚动方向

　　添加按钮HTML代码：

<input id='btn1' type='button' value='向左滚动'/>
<input id='btn2' type='button' value='向右滚动'/>

JavaScript代码：

window.οnlοad=function()
{
    var oDiv1=document.getElementById("div1");
    var oUl=oDiv1.getElementsByTagName("ul")[0];
    var aLi=oDiv1.getElementsByTagName("li");
    var oBtn1=document.getElementById("btn1");
    var oBtn2=document.getElementById("btn2");
    var speed=2;
    //li的数目翻倍
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    //oUl的宽度重新计算
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    
    function move()
    {
        if(-oUl.offsetLeft>oUl.offsetWidth/2)
        {
            oUl.style.left='0';
        }
           if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+"px";
        }
        oUl.style.left=oUl.offsetLeft+speed+"px";
    }
    var timer=setInterval(move,100);
    
    oBtn1.onclick=function()
    {
         speed=-2;    
    }
    
        oBtn2.onclick=function()
    {
          speed=2;    
    }
    
    oDiv1.onmouseover=function()
    {
        clearInterval(timer);            
    }
    
    oDiv1.onmouseout=function()
    {
        timer=setInterval(move,100);    
    }    
}

　(5)函数move()的重新合成构造在编写代码时不太清晰。为speed赋值时，错误的添加了var关键字 oBtn2.οnclick=function()

　　{

　　var speed=2;

　　}

　　这种写法与

　　oBtn2.οnclick=function()

　　{

　　speed=2;

　　}

　　的区别在哪里?

应用JavaScript搭建一个简易页面图片无缝滚动效果

相关推荐