5-9轮播图
来源：5-6 首页.UI组件-UiSlider（1）
RoseMe
2019-03-05 17:47:58
老师好，我的代码这样写出来三个点均是高亮，
我用的这种方法写的，效果也一样
3回答
-
山河远阔ZZ
2019-03-06
同学你好。
在css中，类名写错了哦，参考下图：
html中class类名是"ui-slier-process",而在css中，多写了一个“d”。
自己试一试哦，如果帮助到了你，欢迎采纳。
祝学习愉快！
0 -
RoseMe
提问者
2019-03-06
<!-- 幻灯片 -->
<div class="banner-slider ui-slider">
<!-- 图片 -->
<div class="ui-slider-wrap">
<a href="#" class="item"><img src="./img/banner_1.jpg" alt="banner-1"></a>
<a href="#" class="item"><img src="./img/banner_2.jpg" alt="banner-2"></a>
<a href="#" class="item"><img src="./img/banner_3.jpg" alt="banner-3"></a>
</div>
<!-- 左右箭头 -->
<div class="ui-slider-arrow">
<a href="#l" class="item left"> </a>
<a href="#r" class="item right"> </a>
</div>
<!-- 进度条 -->
<div class="ui-slier-process">
<a href="#" class="item item_focus"></a>
<a href="#" class="item "></a>
<a href="#" class="item"></a>
</div>
</div>
/* ui-slider幻灯片组件 */
.ui-slider{
width: 544px;
height: 414px;
position: relative;
/* overflow: hidden; */
}
.ui-slider-wrap{
width: 9999px;
display: block;
height: 414px;
position: absolute;
left: 0;
top: 0;
transition: all .5;
}
.ui-slider-wrap .item{
width: 544px;
height: 414px;
display: block;
float: left;
}
.ui-slider-arrow{
width: 544px;
height:40px;
/* 绝对定位居中 */
position: absolute;
top: 50%;
margin-top: -20px;
}
.ui-slider-arrow .item{
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
background: url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
left: 0;
}
.ui-slider-arrow .right{
right: 0;
background-position: -40px 0;
}
.ui-slier-process{
width: 544px;
height: 12px;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
}
.ui-slier-process .item{
display:inline-block;
width: 16px;
height: 16px;
background: url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slier-process .item:hover{
background-position: -23px 0;
}
老师好，需要默认第一个有高亮，请老师帮忙看一下
0 -
山河远阔ZZ
2019-03-05
同学你好，建议把html和css代码都粘贴上来哦，老师根据你的代码来查找问题哦。
祝学习愉快！
0
相似问题