js 制作轮播图 并且可以通过按钮定位到拿一张图片，上一张下一张

<div id="bannerimg">
<div id="hreff">
<button >1</button>
<button >2</button>
<button >3</button>
<button >4</button>

</div>

<div id="ss" style="margin-left: 0;">
<div id="bannerimgone">
<img src="img/1%20(1).jpg" >
</div>
<div id="bannerimgone">
<img src="img/4.jpg" >
</div>
<div id="bannerimgone">
<img src="img/1%20(3).jpg" >
</div>
<div id="bannerimgone">
<img src="img/1%20(1).gif" >
</div>
</div>
</div>
<div id="href">
<a href="javascript:;" id="pre" class="arrow" style="text-decoration: none; ">&lt;</a>
<a href="javascript:;" id="next" class="arrow" style="text-decoration: none;margin-left: 470px;" >&gt;</a>
</div>

<script type="text/javascript">
// 获取页面上包裹照片DIV的元素
var img=document.getElementById("ss")

var pre=document.getElementById("pre")
var next=document.getElementById("next")
var index=0;//声明一个全局变量
var oneonly;//全局声明计时器
var div=document.getElementById("bannerimg")//获取元素节点

var hreff=document.getElementById("hreff").getElementsByTagName("button")

console.log(hreff)




function ma(){
// 每次调用这个方法的时候index+1 因为页面上有四个图片第三次的时候就已经到第四章图片的位置
index++;
// 判断如果 index++大于3的时候超过了我们设置的图片数量 就等于0从新循环
if(index>3){
index=0
}
co()
// 如果 值等于1500px就是四张图 就改成0px
if(img.style.marginLeft=="-1500px"){
img.style.marginLeft="0px"

}else{
img.style.cssText="margin-left: -"+index*500+"px;"
}

}
for (let i = 0 ;i<hreff.length; i++){
hreff[i].onclick=function(){
index=i;
img.style.cssText="margin-left: -"+index*500+"px;"
co()

}
}


function co(){
for(let y=0;y<hreff.length;y++){
hreff[y].style.backgroundColor=""

}
hreff[index].style.backgroundColor="lawngreen"


}



pre.onclick=function(){
index--;
// 上一张 index-- 第一次执行的时候i--第一张图片的下标是-1 之后执行下面的循环 如果小于0 就从新赋值为3
if(index<0){
index=3
}

if(img.style.marginLeft=="0px"){
img.style.marginLeft="-1500px"

}else{
img.style.cssText="margin-left: -"+index*500+"px;"


}
}
next.onclick=function(){
index++;
if(index>3){
index=0
}
if(img.style.marginLeft=="-1500px"){
img.style.marginLeft="0px"

}else{
img.style.cssText="margin-left: -"+index*500+"px;"
}



}




function start(){//定时器 用来下面清除
oneonly=setInterval(function(){
ma()

},2000);
}
start();
function stop(){
clearInterval(oneonly);//清除计时器
}

div.onmouseleave = start; //计时器开始
div.onmouseenter = stop; //计时器结束
</script>