<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
.main{
width: 500px;
height: 500px;
}
#container {
position: relative;
width: 550px;
height: 252px;
border: 3px solid #333;
overflow: hidden;
}
#list {
position: absolute;
z-index: 1;
width: 1100px;
height: 252px;
display:flex;
}
#list img {
width: 550px;
}
.arrow {
display:block;
position: absolute;
top: 105px;
z-index: 2;
display: none;
width: 20px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 37px;
text-align: center;
color: #fff;
cursor: pointer;
}
#container:hover .arrow {
display: block;
}
#prev {
left: 3px;
}
#next {
right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:0px;">
<img src="res/htmlLX/gunbo1.jpg" />
<img src="res/htmlLX/gunbo2.jpg" />
</div>
<span id="prev" class="arrow" οnclick="">《</span>
<span id="next" class="arrow" οnclick="">》</span>
</div>
<script>
var list = document.getElementById('list');
//上一个
function last() {
}
//下一个
function next() {
}
</script>
</body>
</html>
Html使用left对两张图片实现轮播效果
1579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
