简易轮播图

取自项目html页面

html:

<!doctype html>  
<html lang="en">
<head>
    <meta charset="gb2312">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <link href="./css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="con1_right">
        <div class="right_box">
            <ul>
                <li><span></span> &ensp;1完成了任务</li>
                <li><span></span> &ensp; 2完成了任务</li>
                <li><span></span> &ensp; 3完成了任务</li>
                <li><span></span> &ensp; 4完成了任务</li>
                <li><span></span> &ensp; 5完成了任务</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
    var height = $('.right_box ul').css('height');
    var number = parseInt(height) / 25 - 3;
    var idx = 0;
    setInterval(function () {
        idx++;
        $('.right_box ul').animate({ top: idx * (-25) + "px" }, function () {
            if (idx >= number) {
                $('.right_box ul').css('top', '0px');
                idx = 0;
            }
        })
    }, 1000);
</script>

css



html{margin:0;padding:0;font-family:"MicrosoftYaHei";}


body{margin:0;padding:0;position:relative;}


a,p,ul,li,button,input,hr,select,textarea,div{margin:0;padding:0;border:0;list-style:none;text-decoration:none;text-decoration-style:none;outline:0;outline:none;-webkit-tap-highlight-color:transparent;background-position: center;background-repeat: no-repeat;}




a,i,span,img,button{display:inline-block;}




.con1_right{width:390px;margin-top:90px;font-size:16px;color:#60C97C;line-height:25px;position:relative;}


.con1_right .right_box{width:280px;height:73px;position:absolute;top:0;left:70px;


overflow:hidden;


}


.con1_right .right_box ul{position:absolute;top:0;left:0;}




 




 






            

            
posted @ 
2021-09-10 15:32 
上官二狗子 
阅读(57) 
评论(0) 
 
收藏 
举报