需要做一个简易的slider

需要做一个简易的slider目前已经写了如下代码
1:获取col-5howitwrok的宽度，把moveleft和moveright的偏移度改成col-5howitwrok的宽度
2:当rowhowitwrokmob已经到最右边的时候，把moveright隐藏掉
3:当rowhowitwrokmob已经到最左边的时候，把moveleft隐藏掉
4:设置每过5秒，点击一次moveright
5:如何设置成循环的slider

<div class="containerhowitwrok">
  <div class="rowhowitwrokmob moveon">

    <div class="col-5howitwrok">
      <img src="">
    </div>

    <div class="col-5howitwrok">
      <img src="">
    </div>

    <div class="col-5howitwrok">
      <img src="">
    </div>

    <div class="col-5howitwrok">
      <img src="">
    </div>

    <div class="col-5howitwrok">
      <img src="">
    </div>

  </div>
  <input type="button" value="<" id="moveleft" class="hide-pc">
  <input type="button" value=">" id="moveright" class="hide-pc">
</div>

  @media(max-width:768px){
    .containerhowitwrok{
      height:500px;
    }
    .rowhowitwrokpc{
      display:none;
    }
    .howhead{
      text-align: center;
      font-size: 70px;
      font-weight: 900;
      color: #9a9a9a4a;
    }
    .howhead2{
      text-align: center;
      font-size: 24px;
      font-weight: 900;
      margin-top: -23px;
      text-transform: uppercase;
    }
    .col-5howitwrok{
      flex:0 0 50%;
      text-align: center;
    }
    .rowhowitwrokmob{
      display:flex;
      flex-wrap: nowrap;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: center;
    }
    .moveon{
      position:absolute;
    }
    #moveright{
      position: relative;
      left: 92%;
      top: 100px;
    }
    #moveleft{
      position: relative;
      left: 0%;
      top: 100px;
    }
    }

<script>
var btn_click_right=document.getElementById("moveright");
var btn_click_left=document.getElementById("moveleft");
var box=document.querySelector(".rowhowitwrokmob");
var a=-384;
btn_click_right.onclick=function(){
a=a+384;
box.style.right=a+'px';   
}
btn_click_left.onclick=function(){
a=a-384;
box.style.right=a+'px'; 
}
</script>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

CSDN专家-showbo 2022-07-06 16:00

关注

建议题看下swiper，非常好用的一个焦点图

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。Swiper中文网提供Swiper在线演示、Swiper中文教程、Swiper中文APi、Swiper下载。 https://www.swiper.com.cn/

一定要自己做可以参考下的，调整了下css

<!doctype html>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
<style>
    @media(max-width:768px) {
        .containerhowitwrok {
            height: 300px;
            position:relative;
            overflow:hidden;
            max-width:768px;
            margin:0 auto;
        }

        .rowhowitwrokpc {
            display: none;
        }

        .howhead {
            text-align: center;
            font-size: 70px;
            font-weight: 900;
            color: #9a9a9a4a;
        }

        .howhead2 {
            text-align: center;
            font-size: 24px;
            font-weight: 900;
            margin-top: -23px;
            text-transform: uppercase;
        }

        .col-5howitwrok {
            flex: 0 0 auto;
            text-align: center;
            width:100vw;
        }
            .col-5howitwrok img {
                width: 100vw
            }
            .col-5howitwrok:nth-child(2n+1) {
                background: #ccc
            }

            .rowhowitwrokmob {
                transition:ease-in .5s;
                display: flex;
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;
                align-content: center;
            }

        .moveon {
            position: absolute;
        }
    .mynews .flex{flex-wrap:wrap}
    #moveright {
        position: absolute;
        right: 0;
        top: 100px;
    }

        #moveleft {
            position: absolute;
            left: 0;
            top: 100px;
        }
        body{margin:0}
     }
</style>
<div class="containerhowitwrok">
    <div class="rowhowitwrokmob moveon" style="left:0px">

        <div class="col-5howitwrok">
            <img src="https://img-blog.csdnimg.cn/89511945fb924b86aa76116919b7e211.png">
        </div>

        <div class="col-5howitwrok">
            <img src="https://img-blog.csdnimg.cn/89511945fb924b86aa76116919b7e211.png">
        </div>

        <div class="col-5howitwrok">
            <img src="https://img-blog.csdnimg.cn/89511945fb924b86aa76116919b7e211.png">
        </div>

        <div class="col-5howitwrok">
            <img src="https://img-blog.csdnimg.cn/89511945fb924b86aa76116919b7e211.png">
        </div>

        <div class="col-5howitwrok">
            <img src="https://img-blog.csdnimg.cn/89511945fb924b86aa76116919b7e211.png">
        </div>

    </div>
    <input type="button" value="<" id="moveleft" class="hide-pc">
    <input type="button" value=">" id="moveright" class="hide-pc">
</div>
<script>
    /*1:获取col-5howitwrok的宽度，把moveleft和moveright的偏移度改成col-5howitwrok的宽度
2:当rowhowitwrokmob已经到最右边的时候，把moveright隐藏掉
3:当rowhowitwrokmob已经到最左边的时候，把moveleft隐藏掉
4:设置每过5秒，点击一次moveright
5:如何设置成循环的slider */
    window.onload = function () {
        var btn_click_right = document.getElementById("moveright");
        var btn_click_left = document.getElementById("moveleft");
        var box = document.querySelector(".rowhowitwrokmob");
        var step = document.querySelector('.col-5howitwrok').offsetWidth;// col-5howitwrok宽度
        var maxLeft = -(document.querySelectorAll('.col-5howitwrok').length - 1) * step;//设置容器的left最小值
        console.log(maxLeft,step)
        var start = 0;

        //循环处理就没必要显示隐藏按钮了
        btn_click_right.onclick = function () {
            start -= step;
            if (start < maxLeft) start = 0;//最后一张再点击一下张，切换到第一张
            box.style.left = start + 'px';
            //btn_click_left.style.visibility = 'visible'
            //btn_click_right.style.visibility = start == maxLeft ? 'hidden' : 'visible';
            //
        }
        btn_click_left.onclick = function () {
            start += step;
            if (start > 0) start = maxLeft;//第一张再点击上一张张，切换到最后一张
            box.style.left = start + 'px';
            //btn_click_left.style.visibility = start == 0 ? 'hidden' : 'visible';
            //btn_click_right.style.visibility ='visible'
        }

        setInterval(() => {
            btn_click_right.onclick();//5s自动切换
        }, 5000);
    }
</script>