This article describes the principle of implementing the js picture carousel effect, and is shared with you for your reference. The specific content is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var timeID;
var image;
var current = 0;
var images = new Array(5);
function init(){
for (var i=1;i<=5;i++){
images[i] = new Image(450,550);
images[i].src = "pictures/"+i+".jpg";
}
image = [0];
}
function setSrc(i){
current = i;
//Set the properties of picture src to realize the switching of picture = images[i].src;
}
function pre(){
if (current <= 0){
alert('It's the first one');
}else{
current--;
setSrc(current);
}
}
function next(){
if (current >= 5){
alert('It's the last one');
}else{
current++;
setSrc(current);
}
}
function play(){
if (current >= 5){
current = 0;
}
setSrc(++current);
}
</script>
<body onload="init()">
<input type="button" value="First Picture" onclick="setSrc(1)">
<input type="button" value="Previous photo" onclick="pre()">
<input type="button" value="Next Photo" onclick="next()">
<input type="button" value="The last one" onclick="setSrc(5)">
<input type="button" value="Slide Show" onclick="timeID=setInterval('play()',500)">
<input type="button" value="Stop Playing" onclick="clearInterval(timeID)">
<div style="border:1px solid blue;width:450px; height:550px;" >
<img src="pictures/" />
</div>
</body>
</html>
Here's the principle
First of all, the init() function is used to initialize the images array and image values. In this example, setSrc() is mainly used to set the src attribute value of the image, so that the image switching is achieved. The image carousel is displayed using a timer! setInterval('play()',500) means that the play() function is called every 0.5s!
Wonderful topic sharing:jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is the code of js picture carousel effect and the introduction of the principle of implementing js picture carousel effect. I hope it can help everyone to truly apply what they have learned.