轮播图自己反复修改后的原创

最新推荐文章于 2022-07-06 16:13:53 发布

weixin_44723840

最新推荐文章于 2022-07-06 16:13:53 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/weixin_44723840/article/details/104216825

版权

.wrap{
width:200px;
height:200px;
border: 1px solid #000;
margin:200px auto;
position: relative;
overflow:hidden;
}
.img1,.img2,.img3,.img4{
width:200px;
height:200px;
border: 1px solid #000;
float:left;

}
ul{

width:810px;
height:200px;
position: absolute;

}
.img1{
background: url(1.jpg);
background-size: 100% 100%;
}
.img2{
background: url(2.jpg);
background-size: 100% 100%;
}
.img3{
background: url(3.jpg);
background-size: 100% 100%;
}
.img4{
background: url(4.jpg);
background-size: 100% 100%;
}
button{
position:absolute;
}
.left{
top:100px;
}

.right{
right:0;
top:100px;
}

</style>

    <ul>
       <li class='img1'></li>
       <li class='img2'></li>
       <li class='img3'></li>
       <li class='img4'></li>
      
    </ul>
    <button class='left'>左</button >
        <button class='right'> 右</button>
</div>
<script>

var ul=document.getElementsByTagName(‘ul’)[0];
var left=document.getElementsByTagName(‘button’)[0];
var right=document.getElementsByTagName(‘button’)[1];
var speed=0;
left.οnclick=function(){

ul.style.left=ul.offsetLeft-200+'px'
if(ul.offsetLeft<=-800){
    ul.style.left=0;
  
 }

}
right.οnclick=function(){

ul.style.left=ul.offsetLeft+200+'px'
console.log(ul.offsetLeft)
if(ul.offsetLeft>=200){
    ul.style.left='-600px';
   
 }

}
// setInterval(function(){
// speed-=200;

// if(ul.offsetLeft<=-600){
// ul.style.left=0;
// speed=0;
// }else{
// ul.style.left=speed+‘px’
// }
// console.log(ul.offsetLeft)
// console.log(ul.style.left)
// },1000)