需要做一个简易的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>
一定要自己做可以参考下的，调整了下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>