var curindex = 0;
var maxlen = document.getElementsByClassName("slides").getElementsByTagName("li").length-1;
var timer = null;
timer = setInterval(change_auto,3000)
function change_auto(){
if(curindex<maxlen){
curindex++;
get_next();
}else
{
curindex = 0;
get_reset()
}
}
var width = 600
function get_next(){
var totalbanner = document.getElementsByClassName("slides")
totalbanner.style.marginLeft = "-"+width*curindex+"px"
totalbanner.style.transition = 0.3+"s"
}
function get_reset(){
var totalbanner = document.getElementsByClassName("slides")
totalbanner.style.marginLeft = "0px"
totalbanner.style.transition = "0s"
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<link rel = "stylesheet" href = "css/2.css">
<title>PUBG</title>
</head>
<body>
<script src="2.js"></script>
<div class="pubg">
<ul class="slides">
<input type="radio" id="control-1" name="control" checked>
<input type="radio" id="control-2" name="control" >
<input type="radio" id="control-3" name="control" >
<input type="radio" id="control-4" name="control" >
<input type="radio" id="control-5" name="control" >
<li class="slide"><a href="#"><p class = "l1">2021PGC全球总决赛官宣11月19日开赛</p></a></li>
<li class="slide"><a href="#"><p class = "l1">2021PCL年度规划</p></a></li>
<li class="slide"><a href="#"><p class = "l1">欢迎来到2021PGC全球总决赛</p></a></li>
<li class="slide"><a href="#"><p class = "l2">PCL｜转会期窗口开放公告</p></a></li>
<li class="slide"><a href="#"><p class = "l1">2021PCL年度规划</p></a></li>
<div class="controls-visible">
<label for="control-1"></label>
<label for="control-2"></label>
<label for="control-3"></label>
<label for="control-4"></label>
<label for="control-5"></label>
</div>
</ul>
</div>
</body>
</html>
.pubg {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
li.slide a{
width:100%;
height:100%;
display: block;
text-decoration:none;
}
ul.slides {
position: relative;
width: 600px;
height: 280px;
list-style: none;
margin: 0;
padding: 0;
background-color: #eee;
overflow: hidden;
}
li.slide {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: flex-start;
align-items: flex-end;
font-family: Helvetica;
font-size: 25px;
transition: .5s transform ease-in-out;
}
p{
display: block;
margin-block-start: 1em;
margin-block-end: 1.5em;
margin-inline-start: 0px;
margin-inline-end: 0px;
position: absolute;
}
.l1{
color: #fff;
position: absolute;
}
.l2{
color: #333;
position: absolute;
}
.slide:nth-of-type(1) {
background-image: url("../img/l1.jpg");
}
.slide:nth-of-type(2) {
background-image: url("../img/l2.jpg");
left: 100%;
}
.slide:nth-of-type(3) {
background-image: url("../img/l3.jpg");
left: 200%;
}
.slide:nth-of-type(4) {
background-image: url("../img/l4.jpg");
left: 300%;
}
.slide:nth-of-type(5) {
background-image: url("../img/l3.jpg");
left: 400%;
}
input[type="radio"] {
position: relative;
z-index: 100;
display: none;
}
.controls-visible {
position: absolute;
width: 100%;
bottom: 12px;
text-align: center;
}
.controls-visible label {
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 3px;
border: 2px solid #fff;
}
.slides input[type="radio"]:nth-of-type(1):checked ~ .controls-visible label:nth-of-type(1) {
background-color: #333;
}
.slides input[type="radio"]:nth-of-type(2):checked ~ .controls-visible label:nth-of-type(2) {
background-color: #333;
}
.slides input[type="radio"]:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3) {
background-color: #333;
}
.slides input[type="radio"]:nth-of-type(4):checked ~ .controls-visible label:nth-of-type(4) {
background-color: #333;
}
.slides input[type="radio"]:nth-of-type(5):checked ~ .controls-visible label:nth-of-type(5) {
background-color: #333;
}
.slides input[type="radio"]:nth-of-type(1):checked ~ .slide {
transform: translatex(0%);
}
.slides input[type="radio"]:nth-of-type(2):checked ~ .slide {
transform: translatex(-100%);
}
.slides input[type="radio"]:nth-of-type(3):checked ~ .slide {
transform: translatex(-200%);
}
.slides input[type="radio"]:nth-of-type(4):checked ~ .slide {
transform: translatex(-300%);
}
.slides input[type="radio"]:nth-of-type(5):checked ~ .slide {
transform: translatex(-400%);
}
.navigator {
position: absolute;
top: 50%;
transform: translatey(-50%);
width: 100%;
z-index: 100;
padding: 0 20px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
display: none;
}
.navigator i {
font-size: 32px;
color: #333;
}
.slides input[type="radio"]:nth-of-type(1):checked ~ .navigator:nth-of-type(1) {
display: flex;
}
.slides input[type="radio"]:nth-of-type(2):checked ~ .navigator:nth-of-type(2) {
display: flex;
}
.slides input[type="radio"]:nth-of-type(3):checked ~ .navigator:nth-of-type(3) {
display: flex;
}
.slides input[type="radio"]:nth-of-type(4):checked ~ .navigator:nth-of-type(4) {
display: flex;
}
.slides input[type="radio"]:nth-of-type(5):checked ~ .navigator:nth-of-type(5) {
display: flex;
}
