贴个自己写的轮播图
html吧
全部回复
仅看楼主
level 7
虚度浮华 楼主
有需要的带走 大神勿喷
2019年11月07日 09点11分 1
level 7
虚度浮华 楼主
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>
2019年11月07日 09点11分 2
level 7
虚度浮华 楼主
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;}
2019年11月07日 09点11分 3
level 7
虚度浮华 楼主
js部分
2019年11月07日 09点11分 7
1