用jquery动画实现的简单的图片轮播

向右看齐 2022-08-09 00:50 164阅读 0赞

<!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>  
        <title>图片轮播</title>  
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />  
        <link rel="stylesheet" type="text/css" href="css/showpicturesinturn.css">  
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
        <style type="text/css">  
        div.pictures\{  
        width:500px;  
        height:400px;  
        overflow: hidden;  
            position:relative;  
            float: left;  
            top:0;  
            left:-250px;  
            margin-left: 50%;  
        \}  
        ul.picture \{  
            width: 2000px;  
            float: left;  
            list-style: none;  
            position: relative;  
        \}  
         .picture li\{  
            width:500px;  
            height:400px;  
            float: left;  
            position: relative;  
        \}  
        .number\{  
            position: absolute;  
            top:350px;  
            left:350px;  
            list-style: none;  
        \}  
        .number li\{  
            color:\#ddd;  
            float:left;  
            width:30px;  
            height:25px;  
            line-height: 25px;  
            text-align: center;  
            border: 1px solid \#fff;  
            background-color:\#6f4f67;  
            cursor: pointer;  
        \}  
        </style>  
    </head>  
    <body id="showpicturesinturn">  
        <div class="pictures">  
        <ul class="picture">  
        <li><img src="images/mypicture1.png" title="我的图片1" alt="我的图片1"></li>  
        <li><img src="images/mypicture2.png" title="我的图片2" alt="我的图片2"></li>  
        <li><img src="images/mypicture3.png" title="我的图片3" alt="我的图片3"></li>  
        <li><img src="images/mypicture4.png" title="我的图片4" alt="我的图片4"></li>  
        </ul>  
            <ul class="number">  
                <li>1</li>  
                <li>2</li>  
                <li>3</li>  
                <li>4</li>  
            </ul>  
        </div>  
        <script type="text/javascript" src="js/showpicturesinturn.js"></script>  
        <script type="text/javascript">  
            $(function()\{  
                function animation()  
                \{  
                    showpicturesinturn = setInterval(function()\{  
                    if($(".picture li").css("left")=="-1500px")\{  
                        $(".picture li").css("left","0px");  
                    \}  
                    else\{  
                        $(".pictures li").animate(\{left:"-=500px"\});  
                    \}  
                    \},2000);    
                \}  
                animation();  
                $(".number li").click(function()\{  
                    clearInterval(showpicturesinturn);  
                    $(".picture li").css("left","-"+$(this).index()\*500+"px");  
                    animation();  
                \});                     
            \});  
        </script>  
    </body>  
 </html>