运用jQuery进行轮播图

先引入jQuery文件

<script src="js/jquery-3.6.0%20(1).js" type="text/javascript" charset="utf-8"></script>

在HTML文件中添加图片

给图片添加统一的大小

<div class="Contentareaimg">
 <li class="lbt"><img src="img/1.jpg" style="width: 603px;"></li>
 <li class="lbt"><img src="img/2.jpg" style="width: 603px;"></li>
 <li class="lbt"><img src="img/3.jpg" style="width: 603px;"></li>
 <li class="lbt"><img src="img/4.jpg" style="width: 603px;"></li>
 <li class="lbt"><img src="img/5.jpg" style="width: 603px;"></li>
</div>

这是CSS文件

给盒子添加一个定位 定位到需要的位置

.Contentareaimg{
       position: absolute;
       top: 10px;
       left: 620px;
   }

 

给图片添加一个定位，让其在一个位置上

.Contentareaimg>li{
  　　list-style: none;
  　　position:absolute;
　　}

这是js文件

设置一个函数 进行 for循环 每两秒跳转一个图片

var a = 0;

function smc() {
    a++;
    b = document.getElementsByClassName('lbt');
    if (a >= b.length) a = 0;
    for (var i = 0; i < b.length; i++) {
        b[i].style.display = 'none';
    }
    b[a].style.display = 'block';
}
setInterval(smc, 2000);