轮播图scroll属性运用

最新推荐文章于 2023-06-26 15:49:43 发布

LT_ya

最新推荐文章于 2023-06-26 15:49:43 发布

阅读量330

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/tao__f/article/details/108986991

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

1.先获取大盒子的可见属性client；
2.通过scrollleft或top实现移动；
3.当clientwidth=scrollwidth-scrollleft到达临界点（受边框等属性影响适当加减1）
同理实现上下轮播：

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #container{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        overflow: hidden;
        text-align: center;
       
    }
    
</style>
<body>
    <div id="container">
        <div id="main">
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div style="width: 300px;height:300px;background-image: url(../img/0.jpg);box-sizing: border-box;background-size: 300px,300px;"></div>
        </div>
        
    </div>
    <button ondblclick="func()">开始</button>
</body>
<script>
    var con=document.getElementById("container");
    var box=document.getElementById("main");
    var boxs=box.getElementsByTagName("div");
    for(let i=0;i<boxs.length-1;i++){
       
        boxs[i].style.cssText="width: 300px;height:300px;background-image: url(../img/"+i+".jpg);box-sizing: border-box;background-size: 300px,300px;"
    }
     
     function func(){
       var height=box.clientHeight;
       setInterval(function () {
       		if(con.scrollTop >= height - con.offsetHeight-1) {
           		con.scrollTop = 0;
       		}else {
           		con.scrollTop++;
            }

            // console.log(con.scrollTop)
    	}, 10);
     }
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #container{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        overflow:hidden;
        text-align: center;
       
    }
    #main{
        width: 1500px;
        height: 300px;
          background-color: aquamarine;   
    }
    #main div{
        float: left;
    }
    
</style>
<body>
    <div id="container">
        <div id="main">
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div style="width: 300px;height:300px;background-image: url(../img/0.jpg);box-sizing: border-box;background-size: 300px,300px;"></div>
        </div>
        
    </div>
    <button ondblclick="func()">开始</button>
</body>
<script>
    var con=document.getElementById("container");
    var box=document.getElementById("main");
    var boxs=box.getElementsByTagName("div");
    for(let i=0;i<boxs.length-1;i++){
       
        boxs[i].style.cssText="width: 300px;height:300px;background-image: url(../img/"+i+".jpg);box-sizing: border-box;background-size: 300px,300px;"
    }
     
     function func(){
       var width=con.clientWidth;
       console.log(con.clientWidth);
    //    con.scrollLeft >= width - con.offsetWidth
       setInterval(function () {
       		if(con.scrollWidth-con.scrollLeft-1<=width) {
           		con.scrollLeft = 0;
       		}else {
           		con.scrollLeft++;
            }
            console.log(con.scrollWidth-con.scrollLeft);
            // console.log(con.scrollTop)
    	}, 10);
     }
</script>
</html>

LT_ya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图scroll属性运用

1.先获取大盒子的可见属性client；2.通过scrollleft或top实现移动；3.当clientwidth=scrollwidth-scrollleft到达临界点（受边框等属性影响适当加减1）同理实现上下轮播：<!-- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=
复制链接

扫一扫