js轮播②宽的移动

最新推荐文章于 2022-07-06 20:58:10 发布

一只大喵喵

最新推荐文章于 2022-07-06 20:58:10 发布

阅读量167

点赞数 1

本文链接：https://blog.csdn.net/Cream_Cicilian/article/details/79400425

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js轮播②宽的移动</title>
    <style type="text/css">
        .mainm{
            background-color: pink;
            width: 800px;
            height: 400px;
            position: absolute;

            overflow: hidden;
        }
        .tupian img{
           width: 800px;
           height: 400px;
           float: left;
        }
        .tupian{
            width: 5600px;
            height: 400px;
            position: absolute;
            z-index: 1;
            background-color: red;
            left: -800px;
        }
    </style>
</head>
<body>
   <div class="mainm">
      <div class="tupian" id="tupian" style="left: -800px;">
       <img src="luotianyi.jpg">
       <img src="luotianyi.jpg">
       <img src="luotianyi2.jpg">
       <img src="luotianyi3.jpg">
       <img src="luotianyi.jpg">
       <img src="luotianyi2.jpg">
       <img src="luotianyi3.jpg">
       <img src="luotianyi3.jpg">
      </div>
   </div>

</body>
  <script type="text/javascript">
     var timer=null;
     var tupian=document.getElementById('tupian');
     timer=window.setInterval("move()",1000);
     alert(tupian.style.left);
     console.log("1");
     function move(){
        var tupian=document.getElementById('tupian');
        var newLeft=parseInt(tupian.style.left)-800;
        tupian.style.left = newLeft + 'px';
         console.log("2");
         if(newLeft<-4000){
                tupian.style.left = -800 + 'px';
                 }
         if(newLeft>-800){
                 tupian.style.left = -4000 + 'px';
                 }
     }


  </script>
</html>