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

时间:2023-03-08 16:19:24

  页面图片无缝滚动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.onload=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.onload=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.onload=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.onclick=function()

  {

  var speed=2;

  }

  这种写法与

  oBtn2.onclick=function()

  {

  speed=2;

  }

  的区别在哪里?