<%@ 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
