swiper轮播 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/swiper.css"/>
        <style type="text/css">
            .swiper-container{
                width: 600px;
                height: 300px;
                margin: 0 auto;
                border:1px solid #ccc
            }
            .h1{
                background: skyblue;
                transition: all 2s;
            }
            .h2{
                background: pink;
                transform: translate(-300px,0);
                opacity: 0;
            }
            .h2huaru{
                animation: huaru 3s;
            }
            
            @keyframes huaru{
                from{transform: translate(-300px,0);opacity: 0;}
                to{transform: translate(0,0);opacity: 1;}
            }
        </style>
    </head>
    <body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">
                    <h1 class="h1">slide 2</h1>
                    <h2 class="h2">这是1个划入动画</h2>
                </div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <!--<div class="swiper-scrollbar"></div>-->
        </div>
        
        
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
        
        <script type="text/javascript">
            var selector = '.swiper-container'
            var config = {
                direction:'horizontal',
                loop: true,
                autoplay:true,
                
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },
                
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                
                // 如果需要滚动条
//                scrollbar: {
//                  el: '.swiper-scrollbar',
//                },
                on:{
                    slideChange:function(){
//                        console.log(this)
                        if(this.activeIndex == 2){
                            $('h1').css({
                                background:'pink'
                            })
                            $('.h2').addClass('h2huaru')
                        }
                    }
                }
              }
            var mySwiper = new Swiper (selector,config)       
        </script>
    </body>
</html>

 

posted @ 2019-03-18 21:24  就这样子吧  阅读(245)  评论(0)    收藏  举报