html左右⽆缝滑动
scrollLeft代表页⾯利⽤滚动条滚动到右侧时，隐藏在滚动条左侧的页⾯的宽度。
offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗⼝的显⽰⼤⼩改变。
setInterval() ⽅法可按照指定的周期(以毫秒计)来调⽤函数或计算表达式。setInterval() ⽅法会不停地调⽤函数，直到 clearInterval() 被调⽤或窗⼝被关闭。
明⽩了这个具体的实现就好理解了。
实现的原理是这样的：⾸先将需要滚动的内容复制⼀份。当右侧的div显⽰的内容与左侧影藏的内容宽度相同时将⽗容器左侧影藏的内容显⽰出来，这样就实现了将左侧影藏的内容显⽰出来同时将右侧内容重新隐藏。如果右侧内容显⽰的部分少于左侧影藏的内容就继续讲⽗容器想左侧移动，实现隐藏。其中有⼀点需要注意的是，由于这⾥是将两张图⽚同时放⼊左侧，当右侧显⽰了⼀半时会将左侧影藏的完全显⽰出来，⼜因为右侧显⽰的内容与左侧的左边内容相同所以实现了循环滚动的效果。
这样平滑的滚动就实现了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>图⽚滚动</title>
</head>
<body>
<style type="text/css">
#demo {
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 1280px;
height: 200px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="chaofu-oss.oss-cn-beijing.aliyuncs/userfiles/2021-10-11/1ae94a52a87d45539177e5ae105bbd21/614b06d40d33d.pn g"border="0" /></a>
<a href="#"><img src="chaofu-oss.oss-cn-beijing.aliyuncs/userfiles/2021-10-11/1ae94a52a87d45539177e5ae105bbd21/614b06d40d33d.pn g"border="0" /></a>
<a href="#"><img src="chaofu-oss.oss-cn-beijing.aliyuncs/userfiles/2021-10-11/1ae94a52a87d45539177e5ae105bbd21/614b06d40d33d.pn g"border="0" /></a>
html滚动效果代码<a href="#"><img src="chaofu-oss.oss-cn-beijing.aliyuncs/userfiles/2021-10-11/1ae94a52a87d45539177e5ae105bbd21/614b06d40d33d.pn g"border="0" /></a>
<a href="#"><img src="chaofu-oss.oss-cn-beijing.aliyuncs/userfiles/2021-10-11/1ae94a52a87d45539177e5ae105bbd21/614b06d40d33d.pn g"border="0" /></a>
<a href="#"><img src="chaofu-oss.oss-cn-beijing.aliyuncs/userfiles/2021-10-11/1ae94a52a87d45539177e5ae105bbd21/614b06d40d33d.pn g"border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed =10;
var tab = ElementById("demo");
var tab1 = ElementById("demo1");
var tab2 = ElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth - tab.scrollLeft <=0)
tab.scrollLeft -= tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
clearInterval(MyMar)
};
MyMar = setInterval(Marquee, speed)
};
-
->
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。