Partage de code d'effet carrousel fait maison jq et css-js tutoriel-php.cn

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

小云云

Libérer： 2018-02-28 10:14:40

original

1319 Les gens l'ont consulté

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 -->

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

partie js :

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

Copier après la connexion

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!