Partage de code d'effet carrousel fait maison jq et css

Cet article partage principalement avec vous le code de l'effet carrousel fait maison jq et css, dans l'espoir d'aider tout le monde.

partie html :

<p class="banner1">
<p 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>
</p>
<!-- 图片盒子 end -->
<p class="title1">
<span>这是我定义的第一张图</span>
<span>这是我定义的第二张图</span>
<span>这是我定义的第三张图</span>
</p>
</p>
<ul class="circle1">
<li class="circle_active"></li>
<li></li>
<li></li> 
</ul><!-- 圆点下标 end -->

partie 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;
}

partie js :

var imgindex=$('.imgbox1').find('a').index()
                var titleindex=$('.title1').find('span').index();
                $(window).ready(function(){
                
$('.title1').find('span').eq(0).show();
                
$('.title1').find('span').eq(0).siblings().hide();
                })
$('.circle1').on('click','li',function(){
var circleindx=$(this).index();
imgindex=circleindx;
titleindex=circleindx;
$(this).addClass('circle_active');
$(this).siblings().removeClass('circle_active');
$('.imgbox1').find('a').eq(imgindex).show(300);
$('.imgbox1').find('a').eq(imgindex).siblings().hide();
$('.title1').find('span').eq(titleindex).show();
$('.title1').find('span').eq(titleindex).siblings().hide();
    })
    function autoplay(){      
timer=setInterval(function(){
  imgindex++;
  var circles=$('.circle1').find('li');
  if(imgindex>circles.length-1){                  
imgindex=0; 
      }               
  circles.eq(imgindex).trigger("click");       
},2000); 
}       
                autoplay()

Recommandations associées :

Explication détaillée du composant React Carousel React-slider-light

Implémentation JS du carrousel d'images

jquery Implement Code image du carrousel côté PC

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!