标签：function index 一张 轮播 img style js hreff var
<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; "><</a>
<a href="javascript:;" id="next" class="arrow" style="text-decoration: none;margin-left: 470px;" >></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>
标签：function,index,一张,轮播,img,style,js,hreff,var 来源： https://www.cnblogs.com/wzsoul/p/15012834.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。