<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TxtBox.aspx.cs" Inherits="jQuery.TxtBox1" %> <%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %> <%@ Register TagPrefix="Hi" Namespace="jQuery" Assembly="jQuery" %> <!DOCTYPE html> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 1000; margin: 0; } ul li{list-style-type: none} #banner{ width: 800px; height: 400px; overflow:hidden; } #banner ul{ width: 8600px; } #banner ul>li{ width: 800px; height: 400px; float: left; } img{ max-width: 100%; } </style> </head> <body> <div id="banner"> <ul> <li><img src="200x200.jpg" alt="" width="800px" height="400px" />1</li> <li><img src="APP載入封面圖.png" alt="" width="800px" height="400px"/></li> <li><img src="200x200.jpg" alt="" width="800px" height="400px"/></li> <li><img src="200x200.jpg" alt="" width="800px" height="400px"/></li> </ul> </div> <input type="button" value="left" class="left"/> <input type="button" value="right" class="right"/> <script src="jquery-3.3.1.min.js"></script> <script> $(function () { setInterval(bbb,2000) function bbb() { $("#banner ul").css('marginLeft', '-800px'); $("#banner ul>li").eq(3).prependTo($("#banner ul")); $("#banner ul").animate({ marginLeft: "0px" }, 600); } }) </script> </body> </html>
效果:https://www.cnblogs.com/dcrBook/p/9930938.html