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>
巴特西

swiper轮播

最新文章

热门文章
