<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
onload = function() {
count = 0;
bts=document.getElementsByClassName("b");
imgobj = document.getElementById("image");
time=setInterval("changeimg()", 1000);
// for(var i=0;bts.length;i++){
// bts[i].onmouseover=function(){
//
// }
// }
}
function changeimg() {
if(count == 4) {
count = -1;
}
imgobj.src = "img/" + (++count) + ".jpg";
changecolor();
}
function aft(){
clearInterval(time);
if(count==0){
count=5;
}
imgobj.src = "img/" + (--count) + ".jpg";
time = setInterval(changeimg,1000);
changecolor();
}
function bef(){
clearInterval(time);
if(count==4){
count=-1;
}
imgobj.src = "img/" + (++count) + ".jpg";
time = setInterval(changeimg,1000);
changecolor();
}
function oncha(e){
clearInterval(time);
count = e.innerText-1;/*用parseInt()转换成int。图片下标应从0开始*/
imgobj.src = "img/" + (count) + ".jpg";
changecolor();
time=setInterval(changeimg, 1000);
}
function changecolor(){
for(var i=0;i< bts.length;i++){
bts[i].style.backgroundColor="";
if(i==count){
bts[i].style.backgroundColor="#FFC0CB";
}
}
}
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#div1{
width: 1520px;
height: 700px;
}
#div2{
margin-left: 75%;
}
#div1>button{
width: 40px;
height: 120px;
position: fixed;
top: 50%;
background: rgba(0,128,128,0.3);
border: none;
}
#div2>button{
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 10px;
background: rgba(0,128,128,0.3);
}
#div2>button:hover{
background-color: transparent;
}
</style>
</head>
<body>
<div id="div1">
<button onclick="aft()"><</button>
<img src="img/0.jpg" id="image" width="100%" />
<button onclick="bef()" style="right: 0px;">></button>
</div>
<div id="div2">
<button id="0" class="b" onmouseover="oncha(this)" style="background: #FFC0CB;">1</button>
<button id="1" class="b" onmouseover="oncha(this)">2</button>
<button id="2" class="b" onmouseover="oncha(this)">3</button>
<button id="3" class="b" onmouseover="oncha(this)">4</button>
<button id="4" class="b" onmouseover="oncha(this)">5</button>
</div>
</body>
</html>
H5实现图片轮播
最新推荐文章于 2023-10-03 15:13:56 发布