Javascript无缝左右滚动
<!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=gb2312" />
<title></title>
</head>
<body>


<script type="text/javascript">

var $ = function (id)
{
return "string" == typeof id ? document.getElementById(id) : id;
};


var Class =
{

create: function()
{

return function()
{
this.initialize.apply(this, arguments);
}
}
}


Object.extend = function(destination, source)
{

for (var property in source)
{
destination[property] = source[property];
}
return destination;
}


function addEventHandler(oTarget, sEventType, fnHandler)
{

if (oTarget.addEventListener)
{
oTarget.addEventListener(sEventType, fnHandler, false);

} else if (oTarget.attachEvent)
{
oTarget.attachEvent("on" + sEventType, fnHandler);

} else
{
oTarget["on" + sEventType] = fnHandler;
}
};


var Scroller = Class.create();

Scroller.prototype =
{

initialize: function(idScroller, idScrollMid, idScrollLeft, idScrollRight, options)
{
var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
this.widthScroller = oScroller.offsetWidth;
this.widthList = oScrollMid.offsetWidth;
if(this.widthList <= this.widthScroller) return;
oScroller.style.overflow = "hidden";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
this.oScroller = oScroller;
this.scroll = true;
this.SetOptions(options);
this.side = 1;//1是左 -1是右

switch (this.options.Side)
{
case "right" :
this.side = -1;
break;
case "left" :
default :
this.side = 1;
}

addEventHandler(oScrollMid , "mouseover", function()
{ oScroll.scroll = false; });

addEventHandler(oScrollMid , "mouseout", function()
{ oScroll.scroll = true; });

if(idScrollLeft)
{ addEventHandler($(idScrollLeft), "click", function()
{ oScroll.side = 1; }); }

if(idScrollRight)
{ addEventHandler($(idScrollRight), "click", function()
{ oScroll.side = -1; }); }
this.Scroll();
},
//设置默认属性

SetOptions: function(options)
{

this.options =
{//默认值
Step: 1,//每次变化的px量
Time: 50,//速度
Side: "left"//默认滚动方向
};

Object.extend(this.options, options ||
{});
},
//滚动

Scroll: function()
{

if (this.scroll)
{
var iScroll = this.oScroller.scrollLeft, iWidth = this.widthList;

if(this.side > 0)
{

if(iScroll >= (iWidth * 2 - this.widthScroller))
{ iScroll -= iWidth; }

} else
{

if(iScroll <= 0)
{ iScroll += iWidth; }
}
this.oScroller.scrollLeft = iScroll + this.options.Step * this.side;//注意scrollLeft超过1400会自动变回1400 注意长度
}

var oScroll = this; window.setTimeout(function()
{ oScroll.Scroll(); }, this.options.Time);
}
};


window.onload = function()
{
new Scroller("idScroller","idScrollMid", "idScrollLeft", "idScrollRight");
}
</script>
<div id="idScroller" style="width:290px; overflow:hidden">
<div style="width:2000px">
<div id="idScrollMid" style="float:left;">
<div style="float:left"> <img src="1.jpg" width="150px" height="150px;"/> </div>
<div style="float:left"> <img src="1.jpg" width="150px" height="150px;"/> </div>
</div>
</div>
</div>
<input id="idScrollLeft" type="button" value="向左" />
<input id="idScrollRight" type="button" value="向右" />
</body>
</html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述