Carousel
Today, the carousel map is made with pure JS. A complete carousel map includes the following three functions: 1.
There is a button on the left and right sides that can be clicked to switch
2. There are several small dots at the bottom, the dots will switch with the switching of pictures, and when you click on a specific dot, you will jump to the corresponding picture
3. The entire carousel is automatically switched at regular intervals
The realization effect diagram is as follows:
Code analysis:
HTML layout
<div class="wrap">
<ul class="list">
<li class="item active"><img src="image/yourName.jpg" alt=""></li>
<li class="item"><img src="image/pilipili.jpg" alt=""></li>
<li class="item"><img src="image/flower.jpg" alt=""></li>
<li class="item"><img src="image/reo.jpg" alt=""></li>
<li class="item"><img src="image/yu.jpg" alt=""></li>
</ul>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
<button type="button" class="btn" id="goPre"> < </button>
<button type="button" class="btn" id="goNext"> > </button>
</div>
Use a div to wrap the entire carousel, two uls to wrap the picture and the small dots below the picture, and use two buttons to write the buttons on the left and right sides
css style
/* 图片样式 */
.wrap{
width: 800px;
height: 400px;
position: relative;
cursor: pointer;
}
.list{
width: 800px;
height: 400px;
padding: 0;
list-style: none;
position: relative;
}
.item{
position: absolute;/* 让五张图片叠在一起 */
width: 100%;
height: 100%;
opacity: 0;/* 设置元素的不透明级别*/
transition: all .8s;/* 元素过渡属性 */
}
.item:nth-child(1){
background-color: pink;
}
.item:nth-child(2){
background-color: red;
}
.item:nth-child(3){
background-color: blue;
}
.item:nth-child(4){
background-color: green;
}
.item:nth-child(5){
background-color: yellow;
}
.item img{
width: 100%;
height: 100%;
}
/* 左右按钮样式 */
.btn{
width: 50px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
cursor: pointer;
font-size: 26px;
color: #CCCCCC;
background: none;
border: 0;
display: none;
}
.wrap:hover .btn{
display: block;
background:rgba(0,0,0,.3);
border: 0;
outline: none;/* 去除button默认样式 */
}
#goPre{
left: 0;
}
#goNext{
right: 0;
}
.active{
/* 当前被选中的样式 */
opacity: 1;
z-index: 10;
}
/* 下方小圆点样式 */
.pointList{
padding: 0;
list-style: none;
position: absolute;
bottom: 0;
right: 10px;
z-index: 10;
}
.point{
width: 10px;
height: 10px;
background: rgba(0,0,0, .4);
border: 2px solid rgba(255,255,255,.8);
border-radius: 50%;
float: left;
margin-left: 10px;
cursor: pointer;
}
.point.active{
/* 当前被选中的样式 */
background: rgba(255,255,255,.8);
}
Let’s start writing the JS code. The original JS is used here, mainly to encapsulate two functions, and then write a function of “switching to the next” and “switching to the previous”
The first step is to obtain the elements that need to be used
var items=document.getElementsByClassName("item");//获取图片
var goPreBtn=document.getElementById("goPre");//获取左边按钮
var goNextBtn=document.getElementById("goNext");//获取右边按钮
var points=document.getElementsByClassName("point");//获取小圆点
Set a variable var index=0; to store the position of the current picture and the position of the small dot,
First write two functions, one to clear the default active style of pictures and small dots, and then write a function to add active style, the second function is mainly to operate on index
var clearActive=function(){
for(var i = 0; i < items.length; i++){
items[i].className="item";
}
for( var i = 0; i < points.length; i++){
points[i].className="point";
}
}
var goIndex=function(){
clearActive();
console.log(index);
items[index].className="item active";
points[index].className="point active";
time = -10;//这里的time是定时器的时间
}
The first function is: click the left and right buttons to switch pictures , first write the functions of "switch to the next" and "switch to the previous", here you need to make a judgment on the index, if the index reaches the first one and click to switch to the next one Jump back to the last picture, directly let index==4, which is equal to the index value of the last picture, and switch to the previous picture for the same reason
var goPre=function(){
if(index == 0){
index = 4;
}else{
index--;
}
goIndex();
}
var goNext=function(){
if(index < items.length-1){
index++;
}else{
index = 0;
}
goIndex();
}
Finally, mount the time on the two buttons
goNextBtn.addEventListener("click",function(){
goNext();
})
goPreBtn.addEventListener("click",function(){
goPre();
})
The second function is: click the small dot to switch the picture , loop through, add a click event to each small dot, use this.getAttribute("data-index") to get the index value of the current small dot, this is before Each li has been added in the HTML, and then the index value can be assigned to index
for(var i = 0; i < points.length; i++){
points[i].addEventListener("click",function(){
var pointIndex = this.getAttribute("data-index");
index = pointIndex;
goIndex();
})
}
The third function is: Automatically switch pictures . This function mainly uses the timer, and declares a time value var time = 0; this is mainly for the switching time to prevent it from happening. Jump to the next picture to solve the problem of poor user experience. After adding the time, it will jump every two seconds without any operation. After clicking, wait for a while, and then continue to jump every two seconds.
setInterval(function(){
time++;
if(time == 20){
goNext();
time = 0;
}
},100)
Above, the entire effect of the carousel image is completed. The complete code is attached below. When copying and pasting, pay attention to replacing the path of the image with the local one.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 图片样式 */
.wrap{
width: 800px;
height: 400px;
position: relative;
cursor: pointer;
}
.list{
width: 800px;
height: 400px;
padding: 0;
list-style: none;
position: relative;
}
.item{
position: absolute;/* 让五张图片叠在一起 */
width: 100%;
height: 100%;
opacity: 0;/* 设置元素的不透明级别*/
transition: all .8s;/* 元素过渡属性 */
}
.item:nth-child(1){
background-color: pink;
}
.item:nth-child(2){
background-color: red;
}
.item:nth-child(3){
background-color: blue;
}
.item:nth-child(4){
background-color: green;
}
.item:nth-child(5){
background-color: yellow;
}
.item img{
width: 100%;
height: 100%;
}
/* 左右按钮样式 */
.btn{
width: 50px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
cursor: pointer;
font-size: 26px;
color: #CCCCCC;
background: none;
border: 0;
display: none;
}
.wrap:hover .btn{
display: block;
background:rgba(0,0,0,.3);
border: 0;
outline: none;/* 去除button默认样式 */
}
#goPre{
left: 0;
}
#goNext{
right: 0;
}
.active{
/* 当前被选中的样式 */
opacity: 1;
z-index: 10;
}
/* 下方小圆点样式 */
.pointList{
padding: 0;
list-style: none;
position: absolute;
bottom: 0;
right: 10px;
z-index: 10;
}
.point{
width: 10px;
height: 10px;
background: rgba(0,0,0, .4);
border: 2px solid rgba(255,255,255,.8);
border-radius: 50%;
float: left;
margin-left: 10px;
cursor: pointer;
}
.point.active{
/* 当前被选中的样式 */
background: rgba(255,255,255,.8);
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item active"><img src="image/yourName.jpg" alt=""></li>
<li class="item"><img src="image/pilipili.jpg" alt=""></li>
<li class="item"><img src="image/flower.jpg" alt=""></li>
<li class="item"><img src="image/reo.jpg" alt=""></li>
<li class="item"><img src="image/yu.jpg" alt=""></li>
</ul>
<ul class="pointList">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
<button type="button" class="btn" id="goPre"> < </button>
<button type="button" class="btn" id="goNext"> > </button>
</div>
<script>
var items=document.getElementsByClassName("item");//获取图片
var goPreBtn=document.getElementById("goPre");//获取左边按钮
var goNextBtn=document.getElementById("goNext");//获取右边按钮
var points=document.getElementsByClassName("point");//获取小圆点
var time = 0;//小圆点图片定时器
var index=0;//表示第几张图片在展示
var clearActive=function(){
for(var i = 0; i < items.length; i++){
items[i].className="item";
}
for( var i = 0; i < points.length; i++){
points[i].className="point";
}
}
var goIndex=function(){
clearActive();
console.log(index);
items[index].className="item active";
points[index].className="point active";
time = -10;//这里的time是定时器的时间
}
var goNext=function(){
if(index < items.length-1){
index++;
}else{
index = 0;
}
goIndex();
}
var goPre=function(){
if(index == 0){
index = 4;
}else{
index--;
}
goIndex();
}
//挂载事件
goNextBtn.addEventListener("click",function(){
goNext();
})
goPreBtn.addEventListener("click",function(){
goPre();
})
for(var i = 0; i < points.length; i++){
points[i].addEventListener("click",function(){
var pointIndex = this.getAttribute("data-index");
index = pointIndex;
goIndex();
})
}
//定时轮播
setInterval(function(){
time++;
if(time == 20){
goNext();
time = 0;
}
},100)
</script>
</body>
</html>