jquery实现图片自动轮播

你的名字 2022-08-21 03:15 284阅读 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>

欢迎大家与我一起交流学习。