ASP.NET DataList 實現圖片無縫水平滾動

使用 DataList 控件配合 JavaScript 實現圖片水平無縫滾動效果，適用於首頁商品輪播、圖片展示區。

前端標記

<div id="demo" style="overflow: hidden; width: 441px; border: 0px;">
    <table width="441" height="130" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" id="demo1" valign="bottom">
                <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" 
                    DataSourceID="ObjectDataSource1">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="imgbtnInfo" runat="server" 
                                        ImageUrl='<%# Eval("Spic") %>' 
                                        CommandArgument='<%# Eval("Id") %>' 
                                        OnClick="imgbtnInfo_Click" />
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <asp:LinkButton ID="lkbtnInfo" runat="server" 
                                        CommandArgument='<%# Eval("Id") %>' 
                                        OnClick="lkbtnInfo_Click" 
                                        Text='<%# Eval("Type") %>' CssClass="bb">
                                    </asp:LinkButton>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>
                <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
                    SelectMethod="SelectInfo" TypeName="HotelDAL.KeFangServices">
                </asp:ObjectDataSource>
            </td>
            <!-- 關鍵：複製容器，用於無縫循環 -->
            <td id="demo2" align="center" valign="bottom"></td>
        </tr>
    </table>
</div>

JavaScript 滾動邏輯

<script>
    var speed = 20; // 毫秒間隔，數值越大越慢
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");

    // 複製內容到 demo2，形成雙倍寬度
    demo2.innerHTML = demo1.innerHTML;

    function Marquee() {
        // 當捲動超過原始內容寬度，歸零實現無縫
        if (demo1.offsetWidth - demo.scrollLeft <= 0) {
            demo.scrollLeft = 0;
        } else {
            demo.scrollLeft++;
        }
    }

    var timer = setInterval(Marquee, speed);

    // 滑鼠進入暫停，離開繼續
    demo.onmouseover = function () { clearInterval(timer); };
    demo.onmouseout = function () { timer = setInterval(Marquee, speed); };
</script>

原理解析

• RepeatDirection="Horizontal" 讓 DataList 水平排列項目。
• demo1 放真實資料，demo2 以 innerHTML 複製一份，雙容器並排。
• 外層 div#demo 設定 overflow:hidden 且固定寬度，只顯示可視區域。
• 定時器遞增 scrollLeft，當捲動距離達到 demo1.offsetWidth 即重置為 0，視覺上形成無限循環。

改進建議

• 資料繫結時機：確保 demo2.innerHTML = demo1.innerHTML 在 DataList 完成繫結後執行（放在 Page_Load 結尾或 PreRender，或用 ScriptManager.RegisterStartupScript）。
• 圖片載入完成再計算寬度：若圖片未載入，offsetWidth 為 0 導致異常。可在 window.onload 或圖片 onload 事件後初始化滾動。
• 現代化替代：改用 Swiper、Slick、Owl Carousel 等輪播庫，支援觸控、響應式、懶加載、導航點、自動播放配置，維護成本遠低於手寫 JS。
• CSS Animation：同跑馬燈，可用 @keyframes 實現無 JS 滾動。