Using H5+jquery to implement handwritten code for picture carousel

HTML section:

<div class= "Slider" >
<ul>
<li>
<a href= "#" >

</a>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</li>
<li>
<a href= "#" >

</a>
<p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
</li>
<li>
<a href= "#" >

</a>
<p>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
</li>
<li>
<a href= "#" >

</a>
<p>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</li>
</ul>
<!--button layout-->
<div class= "BTN" >
<span class= "Active" >1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>

CSS section: (Here CSS I was written with less, the REM in the conversion method is: 1rem=16px)

. Slider {
Width:710/16rem;
Height:400/16rem;
Border:solid 1/16rem #eee;
position:relative;
Overflow:hidden;
UL {
Width:3500/16rem; Here, the width must be greater than the number of pictures * The width of each picture
List-style:none;
position:relative;
Li {
Width:710/16rem;
Float:left;
A
Display:inline-block;
Width:710/16rem;
Height:400/16rem;
margin:0;
padding:0;
}
p {
Display:block;
Width:710/16rem;
Height:30/16rem;
Font-size:18/16rem;
Text-align:center;
font-family: "Microsoft Ya Hei";
Background-color:black;
Color:white;
Margin-top: -30/16rem;
}
}
}
. btn {
Position:absolute;
right:10px;
bottom:5px;
Text-align:center;
Font-size:15/16rem;
Line-height:26/16rem;
span {
Cursor:pointer;
Display:block;
Float:left;
width:28px;
height:28px;
Background: #0C79B1;
Margin-left:3/16rem;
Color: #fff;
}
. Active {
Background: #b63e1a;
}
}
}

jquery section:

--------Carousel--------
$ (document). Ready (function () {
var slider=$ (". Slider"),
Ul=slider.find ("ul"),
Shownumber=slider.find (". BTN span"),
Onewidth=slider.find ("ul li"). EQ (0). width ();
var timer=null;
The image index value that var inow=0;//is showing

Shownumber.on ("click", Function () {
$ (this). AddClass ("active"). Siblings (). Removeclass ("active");
var index=$ (this). index ();
Inow=index;
Ul.animate ({
"Left":-onewidth*inow,
})
});

Timer=setinterval (function () {
inow++;
if (inow>shownumber.length-1) {
inow=0;
}
Shownumber.eq (Inow). Trigger ("click");
},2000);
})
--------Carousel----------

No screenshots, if there is no understanding can private me ~ ~ ~