Htmlcssjs图⽚轮播，加箭头
轮换图箭头案例
⽅向箭头在图⽚上，应该使⽤绝对定位
⽗级盒⼦应该使⽤相对定位
Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link href="../css/imgmove.css"rel="stylesheet"/>
</head>
<body>
<div id="box1"onmouseout="shouwHidden(0)"onmouseover="shouwHidden(0.5)">
<img src="../img/1.jpg"id="img1"/>
<input type="button"id="left_btn"value="<"onclick="last()"/>
<input type="button"id="right_btn"value=">"onclick="next()"/>
</div>
<div id="box2"></div>
<script src="../js/imgmove.js"></script>
</body>
</html>
js代码
var leftbun = ElementById("left_btn");
var rightbun = ElementById("right_btn");
var img1 = ElementById("img1");
var srclist=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"]; var i =0;
//下⼀个图⽚，修改图⽚路径
function next(){
img1.setAttribute("src",srclist[i]);
if(i==srclist.length-1){
i =0;
}else{
i++;
}
}
// 前⼀个图⽚
function last(){
if(i==0){
i = srclist.length-1;
}else{
i--;
}
img1.setAttribute("src",srclist[i]);
}
//定时滚动
var tid =setInterval("next()",1000);
//传⼊参数
function shouwHidden(opa){
// 不为0，就停⽌滚动
if(opa !=0){
clearInterval(tid);
}else{
tid =setInterval("next()",1000);
}
/js实现轮播图最简代码
/ 透明度，0，完全透明 1，不透明
leftbun.style.opacity = opa;
rightbun.style.opacity = opa;
}
css代码
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #F4F4F4; }
#box1{
display: inline-block; position: relative; margin:auto;
overflow: auto;
}
#left_btn{
position: absolute;
top: 50%;
left: 0px;
margin-top: -10px; opacity: 0;
}
#right_btn{
position: absolute;
top: 50%;
right: 0px;
margin-top: -10px; opacity: 0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。