jq+css自制轮播效果

àì夳堔傛蜴生んèń 2022-05-31 14:36 177阅读 0赞

html部分：

<div class="banner1">  
<div class="imgbox1">  
<a href="\#"><img src="img/detail1.jpg" alt="这是我定义的第一张图"></a>  
<a href="\#"><img src="img/project1.png" alt="这是我定义的第二张图"></a>  
<a href="\#"><img src="img/aboutus.png" alt="这是我定义的第三张图"></a>  
</div>  
  
<div class="title1">  
<span>这是我定义的第一张图</span>  
<span>这是我定义的第二张图</span>  
<span>这是我定义的第三张图</span>  
</div>  
</div>  
<ul class="circle1">  
<li class="circle\_active"></li>  
<li></li>  
<li></li>   
</ul>

css部分：

.banner1 \{  
width: 100%;  
height: 4rem;  
overflow: hidden;  
margin: 0 auto;  
position: relative;  
\}  
.imgbox1 \{  
height: 7.5rem;  
position: absolute;  
left: 0;  
overflow: hidden;  
background: \#fff;  
\}  
.imgbox1 img \{  
width: 100%;  
float: left;  
\}  
  
  
.title1 \{  
width: 100%;  
position: absolute;  
bottom: 0px;  
padding: .25rem .2rem;  
box-sizing: border-box;  
background: rgba(255, 255, 255, 0.8);  
\}  
  
  
.title1>span \{  
color: \#000000;  
display: block;  
text-align: center;  
\}  
  
  
.circle1 \{  
width: 1.5rem;  
margin:  .2rem auto 0;  
\}  
  
  
.circle1 li \{  
width: .2rem;  
height: .2rem;  
margin: .1rem 5px;  
cursor: pointer;  
display: inline-block;  
background: \#CCCCCC;  
border-radius: 50%;  
\}  
  
  
.circle\_active \{  
background: \#575757 !important;  
\}

js部分：