求助HTML5 图片轮播
2018-03-31 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
云南新华电脑学校是经云南省教育厅批准成立的省（部）级重点计算机专业学校，采用三元化管理模式，教学设备先进，师资雄厚学生毕业即就业，学院引进了电商企业入驻，创建心为电商创业园区，实现在校即创业
向TA提问
关注
![]()
展开全部
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>轮播图</title>
<style type="text/css">
* { margin: 0px; padding: 0px;
} #lunbotu { width: 1226px; height: 460px; overflow: hidden; position: relative; margin: 0px auto; position: relative;
} #banner { height: 460px; width: 6130px; position: absolute; transition: 2s; left: 0px;
} #banner img { float: left;
} #biao { position: absolute; top: 430px; left: 43%;
} #biao_1 { height: 20px; width: 20px; border: 1px solid #000; z-index: 10; float: left; list-style: none; border-radius: 50%; margin-left: 20px; text-align: center; cursor:pointer;
} </style>
</head>
<body>
<div id="lunbotu">
<div id="banner">
<img class="m" src="img/T1hiDvBvVv1RXrhCrK.jpg" />
<img class="m" src="img/T1jrxjB_VT1RXrhCrK.jpg" />
<img class="m" src="img/T1oTJjBKKT1RXrhCrK.jpg" />
<img class="m" src="img/T1RICjB7DT1RXrhCrK.jpg" />
<img class="m" src="img/T1vWdTBKDv1RXrhCrK.jpg" />
</div>
<div id="biao">
<ul>
<li id="biao_1">1</li>
<li id="biao_1">2</li>
<li id="biao_1">3</li>
<li id="biao_1">4</li>
<li id="biao_1">5</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var slid = document.getElementById("banner"); //var id = document.getElementById("bt");
var imgwidth = document.getElementsByClassName("m"); var oli=document.getElementsByTagName("li"); //console.log(oli);
//console.log(imgwidth );
var i =0;
auto();
oli[0].style.cssText="background:#ff6700;color:#fff;"; function auto(){
time = setInterval(function(){
i++; if(i <= 4) {
slid.style.left = slid.offsetLeft - 1226 + "px";
oli[i].style.cssText="background:#ff6700;color:#fff;";
oli[i-1].style.cssText="background:none;color:#000;";
} else {
slid.style.left ="0px";
oli[4].style.cssText="background:none;color:#000;";
oli[0].style.cssText="background:#ff6700;color:#fff;";
i=0;
} console.log(i);
}, 3000)
} for(var j=0;j<=4;j++){ //console.log(imgwidth[j].index);
imgwidth[j].index=j;
oli[j].index=j;
oli[j].onmouseover=function(){ this.style.cssText="background:#ff6700;color:#fff;"
this.onmouseout=function(){ this.style.cssText="background:none;color:#000;"
}
}
oli[j].onclick=function(){
clearInterval(time);
m=this.index;
slid.style.left=-m*1226+"px";
i=m;
auto(); console.log(i);
}
}
</script></html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
