轮播图
Posted 本站大佬
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--css-->
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.lbt{
width: 400px;
height: 300px;
background-color: red;
display: flex;
position: relative;
justify-content: center;
align-items: center;
overflow: hidden;
}
.jtleft,
.jtright{
position: absolute;
width: 30px;
height: 30px;
text-align: center;
background-color: white;
}
.ydclsss{
width: 100%;
position: absolute;
text-align: center;
bottom: 10px;
}
.jtleft{
left: 0;
}
.jtright{
right: 0;
}
span {
width: 10px;
height: 10px;
display: inline-block;
border: 10px solid #fdfdfd;
border-radius: 10px;
}
.spans{
border: 10px solid #656466;
}
</style>
</head>
<body>
<div class="lbt">
<img src="./img/b0.png" alt="">
<div class="ydclsss" id="aaa">
</div>
<div class="jtleft" id="jtl"> < </div>
<div class="jtright" id="jtr"> > </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var imglists = ["img/b0.png","img/b1.png","img/b2.png"];
var imgs = document.querySelector("img");
var len = imglists.length;
var imagediv = $('.ydclsss');
var n = 0 ;
var jtl = $('#jtl');
var jtr = $('#jtr');
for(var i=0;i<len;i++){
$("<span />",{
class : "yd",
}).appendTo(imagediv);
}
var spans = document.getElementById('aaa').getElementsByTagName('span');
spans[0].className = 'spans';
for (i = 0; i < len; i++) {
spans[i].index = i;
spans[i].onmouseover = function () {
for (i = 0; i < len; i++) {
spans[i].className = "";
}
n=this.index ;
this.className = 'spans';
imgs.src = imglists[this.index]
}
}
jtr.click(function () {
n++;
if(n>=len){
n=0;
}
for(i=0;i<len;i++){
spans[i].className = ''
}
spans[n].className = 'spans';
imgs.src = imglists[n];
});
jtl.click(function () {
n--;
if(n<0){
n = len
}
for(i=0;i<len;i++){
spans[i].className = ''
}
spans[n].className = 'spans';
imgs.src = imglists[n];
});
var timeclick = function(){
n++;
if(n>=len){
n=0;
}
for(i=0;i<len;i++){
spans[i].className = ''
}
spans[n].className = 'spans';
imgs.src = imglists[n];
};
setInterval(timeclick,2000);
</script>
</body>
</html>
以上是关于轮播图的主要内容，如果未能解决你的问题，请参考以下文章