jQuery图片转动

最新推荐文章于 2021-12-31 14:54:10 发布

diweng1954

最新推荐文章于 2021-12-31 14:54:10 发布

阅读量158

点赞数

文章标签： javascript c# ViewUI

原文链接：http://www.cnblogs.com/dcrBook/p/9930938.html

版权

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

转载于:https://www.cnblogs.com/dcrBook/p/9930938.html

diweng1954

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery图片转动

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TxtBox.aspx.cs" Inherits="jQuery.TxtBox1" %><%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserCont...
复制链接

扫一扫