jq动画

Posted 2020-11-24 wangzihao147

页面的动画自动播放和点击播放

html

          <div class="cl">
                <div class="liqing">
                    <div class="swiper-container" id="ba1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="images/kem.png" width="820px" hight="340px"></div>
                            <div class="swiper-slide"><img src="images/liq.png" width="820px" hight="340px"></div>
                            <div class="swiper-slide"><img src="images/lunyu.png" width="820px" hight="340px"></div>
                            <div class="swiper-slide"><img src="images/hy.png" width="820px" hight="340px"></div>
                            <div class="swiper-slide"><img src="images/tengg.png" width="820px" hight="340px"></div>
                        </div>
                        <div class="swiper-pagination" id="pag1"></div>
                        <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
                    </div>
                    <div class="kuang">
                        <span class="title" data-bannerid="22029" style="width: 164px;">01</span>
                        <span class="title" data-bannerid="22029" style="width: 164px;">02</span>
                        <span class="title" data-bannerid="22029" style="width: 164px;">03</span>
                        <span class="title" data-bannerid="22029" style="width: 164px;">04</span>
                        <span class="title" data-bannerid="22029" style="width: 164px;">05</span>
                    </div>
                </div>

　　

css

.liqing{    
    float: left;
    width: 820px;
    height: 380px;
    overflow: hidden;
    background-color: #e3e2e2;
    position: relative;
}
.d2 {
    float: left;
    width: 820px;
    height: 380px;
    overflow: hidden;
    background-color: #e3e2e2;
    position: relative;
}

.lunbo {
    height: 340px;
    overflow: hidden;
    position: relative;
}

.lunbo>li {
    list-style: none;
    float: left;
    width: 820px;
    height: 340px;
    overflow: hidden;
}

.kuang {
    position: absolute;
    width: 820px;
    height: 40px;
    overflow: hidden;
    top: 340px;
    z-index: 9;
}

.kuang>span {
    list-style: none;
    float: left;
    width: 164px;
    height: 40px;
    box-sizing: border-box;
    background-color: #e3e2e2;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    color: #424242;
    letter-spacing: 1px;
}

.kuang span:hover {
    color: #ab8e66;
    background-color: #f7f6f6;
    border-bottom: 2px #cea861 solid;
}

　　

js

 

$(‘.laizhe‘).hover(function(){
  $(this).find(‘.xl1‘).slideDown(300);
},function(){
  $(this).find(‘.xl1‘).slideUp(300);
})
$(‘.timu‘).mouseover(function(){
  $(this).parent().next(‘.xinjia‘).stop().slideDown(300);
})
$(‘.kaitou‘).mouseleave(function(){
  $(this).find(‘.xinjia‘).stop().slideUp(300);
})