Javascript implements image carousel effect (1) Make images jump

Javascript implements image carousel effect (1) Make images jump_javascript skills

WBOY

Release： 2016-05-16 15:15:13

Original

1304 people have browsed it

The image carousel effect can be seen on the homepage of all major websites and is relatively common. The editor below will share with you the simple implementation of this effect.

1. The picture jumps

2. Implementation of picture sequence control

3. Implementation of front and rear button control

In this article, let’s look at the pictures switching according to the interval.

Let’s complete the structure code first, and I won’t explain it in detail. Let me show you the rendering first:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,ol,li{
list-style: none;
margin: 0;
padding: 0;
}
#slider{
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#slider ul{
width: 2400px;
position: relative;
}
#slider ul:after{
content: " ";
width: 0;
height: 0;
display: block;
}
#slider ul li{
float: left;
width: 800px;
height: 300px;
overflow: hidden;
}
#slider ul li img{
width: 100%;
}
#slider ol{
position: absolute;
bottom: 10px;
left: 46%;
}
#slider ol li{
display: inline-block;
}
#slider ol li a{
display: inline-block;
padding:4px 8px;
border-radius:15px;
background-color: #000;
color: #fff;
}
#slider .prev, #slider .next{
display: inline-block;
position: absolute;
top: 49%;
background-color: #000;
opacity: 0.6;
color: #fff;
padding: 3px;
}
#slider .prev{
left: 10px;
}
#slider .next{
right: 10px;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
</ul>
<ol>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
</ol>
<a href="#">上一张</a>
<a href="#">下一张</a>
</div>
</body>
</html>

Copy after login

Okay, now let’s control the image jump through JS.

First we need to find the location of the picture. Here we use ul to layout, so first we have to find the number of LI under UL

Then let the pictures be displayed one by one. We used the window mode, which is the mask layer mode. #slider is a window, ul is the scenery outside the window, and the scenery ul is arranged horizontally

Then the outside scenery is displayed as the size of the window, that is, each picture is used as the window scenery each time. Here, the size of the picture is controlled to be the same size as the window.

The above explains a concept, that is, layout processing. Next, we control JS. To achieve different display intervals of pictures, we need to use JS’s setInterval or setTimeout. Here we use setInterval (because this is used Easy to get up.)

Every time we jump, we control the left of the position of UL, so that the scenery under ul can be displayed differently every time, and this left is determined according to the width of the window. The first picture Of course left is -800 * 0, the second is -800*1, the third is -800*2...and so on. Then we can get the following code

<script>
(function(){
var slider = document.getElementById("slider");
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li");
var len = imglis.length;
var index = 0;
setInterval(function(){
if(index >= len){
index = 0;
}
imgul.style.left = - (800 * index) + "px";
index++;
},2000);
})();
</script>

Copy after login

The JS code looks very simple like this. Here I set a 2-second jump sequence, and then after the number of jumps is greater than or equal to the number of pictures, let it return to the first picture.

The above content is the editor’s introduction to Javascript to implement the image carousel effect (1) to make the images jump. I hope it will be helpful to everyone.