运用jQuery进行轮播图

作者:@生活在北极的企鹅
本文为作者原创,转载请注明出处:https://www.cnblogs.com/BJQE/p/16045344.html


先引入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);
复制代码

 



如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
posted @   生活在北极的企鹅  阅读(108)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示