Html&css&js 图片轮播，加箭头-CFANZ编程社区

Html&css&js 图片轮播，加箭头

轮换图箭头案例
方向箭头在图片上，应该使用绝对定位
父级盒子应该使用相对定位

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 = document.getElementById("left_btn");
var rightbun = document.getElementById("right_btn");
var img1 = document.getElementById("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);
	}
	// 透明度，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;
}

0 条评论