I won’t say much nonsense, I will just post the code to implement handwritten picture carousels. The code is very simple, and the specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsPicture carousel switch</title>
<style type="text/css">
.imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}
.imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}
.numStyle{top: 0px;}
.textStyle{bottom: 0px;}
.imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}
.imgCon .prev{left: 10px;}
.imgCon .next{left: 370px;}
img{width:400px;height: 400px;}
</style>
</head>
<body>
<div class="imgCon">
<span class="numStyle">loading...</span>
<span class="textStyle">loading...</span>
<strong class="prev">&lt;</strong>
<strong class="next">&gt;</strong>
<img src="" />
</div>
<script type="text/javascript">
var numCon = ('numCon');
var textCon = ('textCon');
var prev = ('prev');
var next = ('next');
var imgChange = ('imgChange');
var imgArr = ['img/','img/','img/','img/'];
var imgText = ['First picture','Second picture','The third picture','Fourth'];
var num = 0;
//Number picture change functionfunction imgTab(){
= num+1 + '/' + ; //Number changes = imgText[num]; //The content of the text at the bottom changes = imgArr[num]; //Picture changes}
imgTab();
//Next button = function(){
num++;
if(num == ){
num = 0;
}
imgTab();
}
//Previous button = function(){
num--;
if(num == -1){
num = -1;
}
imgTab();
}
</script>
</body>
</html>
The above is the pure JavaScript handwritten picture carousel code introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!