网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
html吧 关注：182,140贴子：1,338,872
  • 3回复贴，共1页

贴个自己写的轮播图

有需要的带走 大神勿喷


HTML
<body> <div class="lunbo"> <div class="imglist"> <a class="imgs" href=""><img src="img/1.jpg" alt=""></a> <a class="imgs" href=""><img src="img/2.jpg" alt=""></a> <a class="imgs" href=""><img src="img/3.jpg" alt=""></a> <a class="imgs" href=""><img src="img/4.jpg" alt=""></a> <a class="imgs" href=""><img src="img/5.jpg" alt=""></a> </div> <ul class="iconlist"> <li class="iconstyle">1</li> <li class="iconstyle">2</li> <li class="iconstyle">3</li> <li class="iconstyle">4</li> <li class="iconstyle">5</li> </ul> </div> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/lunbo.js"></script></body>


2026-02-22 08:32:19
广告
不感兴趣
开通SVIP免广告
css
* { margin: 0; padding: 0; list-style: none; text-decoration: none;}
/* 外层div */.lunbo { overflow: hidden; position: relative; border: 1px solid #999; border-radius: 10px; cursor: pointer;}
/* 设置区域大小和图片尺寸 */.lunbo,.imglist,.imgs img { width: 800px; height: 400px;}
/* 包含img的a标签隐藏 */.imgs { display: none;}
/* 位置标签属性 */.iconlist { position: absolute; left: 50%; bottom: 5%; transform: translate(-50%); display: flex;}
/* 每个位置标签样式 */.iconstyle { width: 20px; height: 20px; line-height: 20px; background: #999; border-radius: 50%; margin-left: 5px; text-align: center}/* 显示 */.imgshow { display: block;}/* 每个位置标签选定时的样式 */.iconBgColor { background: red; color: #fff;}


js部分


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 3回复贴，共1页
分享到: