代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
</head>
<style>
/* 定义浏览器窗口样式,方便观看 */
body
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
li
{
float: left;
list-style: none;
width: 600px;
height: 350px;
}
img
{
width: 600px;
height: 350px;
-webkit-user-drag: none;
}
/* 组件式操作 */
.mybanner
{
display: flex;
width: 600px;
height: 350px;
}
.outer
{
position: relative;
width: 600px;
height: 350px;
overflow: hidden;
}
ul
{
position: absolute;
padding: 0;
margin: 0;
width: 3000px;
height: 350px;
left: 0;
transition: left 500ms ease-in-out;
}
ol
{
position: absolute;
width: 210px;
height: 30px;
bottom: 30px;
right: 30px;
user-select: none;
}
.arrow
{
display: block;
}
span:nth-child(1)
{
left: 5px;
}
span:nth-child(2)
{
right: 5px;
}
span
{
top: 155px;
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
user-select:none;
font-weight: bold;
font-family: 黑体, SimHei;
font-size: 30px;
color: black;
opacity: 0.4;
border: 1px solid black;
}
</style>
<body>
<div class="mybanner">
<div class="outer">
<ul>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
<ol></ol>
<div class="arrow">
<span id="left" onclick="leftclick()"> < </span>
<span id ="right" onclick="rightclick()"> > </span>
</div>
</div>
</div>
</body>
<script>
let ul = document.getElementsByTagName('ul')[0];
let right = document.getElementsByTagName('span')[1];
let left = document.getElementsByName('span')[0];
let leftlength = 0;
function rightclick()
{
leftlength = leftlength + 600;
if(leftlength == 3000)
{
leftlength = 0;
ul.style.left = -(leftlength)+'px';
}
else
{
ul.style.left = -(leftlength)+'px';
}
}
function leftclick()
{
leftlength = leftlength - 600;
if(leftlength == -600)
{
leftlength = 2400;
ul.style.left = -(leftlength)+'px';
}
else
{
ul.style.left = -(leftlength)+'px';
}
}
</script>
</html>