javascript实现图片循环滚动效果
时间：2024年03月03日
编辑：佚名
javascript实现图片循环滚动效果图
如图，图片实现无缝滚动，点击向左向右滚动控制方向，且当鼠标悬浮在div中时，图片停止滚动；当鼠标离开div中，图片继续滚动。
原理：复制一遍整个ul，给定一个速度让ul向右或向左滚动，当整个ul要滚动到div边界时，再将整个复制的ul向左或向右拖拽直至整个ul中的图片归位。
图①
图②
图③
图④
图⑤
如图图片向左滚动，当运动到图③位置时，offsetLeft就小于二分之一ul的宽度，此时将ul中的第一个图片拉回到起点即图①的位置；
同理当图片向右滚动运动到图④位置，此时在div内部的ul的offsetLeft就大于0，将ul中的第八个图片拉回到原位即图⑤的位置。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>无缝滚动，移入暂停</title>
<style>
body,div,ul,li,p
{
padding: 0;
margin: 0;
}
#div1
{
position: relative;
margin: 10px auto;
border: 1px solid black;
width: 680px;
height:170px;
overflow: hidden;
}
#div1 ul
{
position: absolute;
left:0;
}
#div1 ul li
{
float:left;
padding: 10px;
list-style: none;
width: 150px;
height: 150px;
}
#div1 ul li img
{
width: 150px;
height: 150px;
}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var timer = null;
var iSpeed = 8;
//复制一遍ul
oUl.innerHTML +=oUl.innerHTML;
//ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
function fnMove()
{
//图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
if (oUl.offsetLeft<-oUl.offsetWidth/2)
{
//将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = 0;
}
//图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
else if (oUl.offsetLeft>=0)
{
//将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
//给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
oUl.style.left = oUl.offsetLeft +iSpeed + "px";
}
timer=setInterval(fnMove,30)
//点击向左滚动即触发第一个a元素标签
oA[0].onclick = function()
{
iSpeed = -8;
}
//点击向右滚动即触发第二个a元素标签
oA[1].onclick = function()
{
iSpeed = 8;
}
//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
oDiv.onmouseover = function()
{
clearInterval(timer);
}
//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
oDiv.onmouseout = function()
{
timer=setInterval(fnMove,30);
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
</ul>
</div>
<a href="javascript:;">向左滚动</a>
<a href="javascript:;">向右滚动</a>
</body>
</html>
如图，图片实现无缝滚动，点击向左向右滚动控制方向，且当鼠标悬浮在div中时，图片停止滚动；当鼠标离开div中，图片继续滚动。
原理：复制一遍整个ul，给定一个速度让ul向右或向左滚动，当整个ul要滚动到div边界时，再将整个复制的ul向左或向右拖拽直至整个ul中的图片归位。
图①
图②
图③
图④
图⑤
如图图片向左滚动，当运动到图③位置时，offsetLeft就小于二分之一ul的宽度，此时将ul中的第一个图片拉回到起点即图①的位置；
同理当图片向右滚动运动到图④位置，此时在div内部的ul的offsetLeft就大于0，将ul中的第八个图片拉回到原位即图⑤的位置。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>无缝滚动，移入暂停</title>
<style>
body,div,ul,li,p
{
padding: 0;
margin: 0;
}
#div1
{
position: relative;
margin: 10px auto;
border: 1px solid black;
width: 680px;
height:170px;
overflow: hidden;
}
#div1 ul
{
position: absolute;
left:0;
}
#div1 ul li
{
float:left;
padding: 10px;
list-style: none;
width: 150px;
height: 150px;
}
#div1 ul li img
{
width: 150px;
height: 150px;
}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var timer = null;
var iSpeed = 8;
//复制一遍ul
oUl.innerHTML +=oUl.innerHTML;
//ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
function fnMove()
{
//图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
if (oUl.offsetLeft<-oUl.offsetWidth/2)
{
//将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = 0;
}
//图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
else if (oUl.offsetLeft>=0)
{
//将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
//给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
oUl.style.left = oUl.offsetLeft +iSpeed + "px";
}
timer=setInterval(fnMove,30)
//点击向左滚动即触发第一个a元素标签
oA[0].onclick = function()
{
iSpeed = -8;
}
//点击向右滚动即触发第二个a元素标签
oA[1].onclick = function()
{
iSpeed = 8;
}
//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
oDiv.onmouseover = function()
{
clearInterval(timer);
}
//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
oDiv.onmouseout = function()
{
timer=setInterval(fnMove,30);
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
</ul>
</div>
<a href="javascript:;">向左滚动</a>
<a href="javascript:;">向右滚动</a>
</body>
</html>
相关文章
猜你需要
