swiper图文标题滚动轮播特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>

3. HTML代码

    <div class="main">
        <div class="title">swiper图文滚动</div>
        <div class="w-imgText" id="imgText">
            <div class="swiperBox">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide" data-title="标题标题111">
                        <div class="item">
                            <div class="imTB">
                                <div class="img">
                                    <img src="images/1.jpg"/>
                                </div>
                                <div class="textB">
                                    <div class="bg_x"></div>
                                    <div class="text_x">
                                        <div class="tt_h">标题标题111</div>
                                        <p>文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明</p>
                                        <div class="btn">查看更多</div>
                                    </div>
                                </div>
                            </div>
                        <a href="#"></a></div>
                    </li>
                    <li class="swiper-slide" data-title="标题标题222">
                        <div class="item">
                            <div class="imTB">
                                <div class="img">
                                    <img src="images/2.jpg"/>
                                </div>
                                <div class="textB">
                                    <div class="bg_x"></div>
                                    <div class="text_x">
                                        <div class="tt_h">标题标题222</div>
                                        <p>文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明</p>
                                        <div class="btn">查看更多</div>
                                    </div>
                                </div>
                            </div>
                        <a href="#"></a></div>
                    </li>
                    <li class="swiper-slide" data-title="标题标题333">
                        <div class="item">
                            <div class="imTB">
                                <div class="img">
                                    <img src="images/3.jpg"/>
                                </div>
                                <div class="textB">
                                    <div class="bg_x"></div>
                                    <div class="text_x">
                                        <div class="tt_h">标题标题333</div>
                                        <p>文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明</p>
                                        <div class="btn">查看更多</div>
                                    </div>
                                </div>
                            </div>
                        <a href="#"></a></div>
                    </li>
                </ul>
            </div>
            <div class="igt_page"></div>
        </div>
        <div class="igt_page_text">
            <ul class="clearfix">
            </ul>
        </div>
        <script type="text/javascript">
        $(function(){
            var imgTextId=$('#imgText');
            var swiperId=imgTextId.find('.swiperBox');
            var pagediv=imgTextId.find('.igt_page');
            var igtli=imgTextId.find('li');
            var igtliW=100*1.0/igtli.length + '%';
            var titles=[];
            var _html = ''; 
            igtli.each(function (index) { 
                var title=$(this).attr('data-title');
                if(index===0){
                    _html += '<li class="igt_li on" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
                }else{
                    _html += '<li class="igt_li" style="width:' + igtliW  + ';"><div class="item_span"><div class="adore"></div><div class="num">0' + (index+1) + '</div><div class="tit">' + title + '</div></div></li>';
                } 
            });
            imgTextId.siblings('.igt_page_text').find('ul').append(_html);
            var swiper1 = new Swiper(swiperId, {
                effect : 'slide', 
                autoplay : {
                    delay:8000,//滚动速度
                    disableOnInteraction: false,
                },
                pagination: {
                    el: pagediv,
                    type: 'custom',
                    renderCustom: function (swiper, current, total) {
                        return '<span class="on">0' + current + '</span><span>/</span><span>0' + total + '</span>';
                    }
                },
              on:{
                slideChange: function(){
                    var index = this.activeIndex;
                    imgTextId.siblings('.igt_page_text').find('li').eq(index).addClass('on').find('.adore').addClass('bg_main');
                    imgTextId.siblings('.igt_page_text').find('li').eq(index).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
                }
              }
            })
            imgTextId.siblings('.igt_page_text').on('click','li',function(){ 
                if (!$(this).hasClass('on')){
                    var thisI = $(this).index();
                    $(this).addClass('on').find('.adore').addClass('bg_main');
                    $(this).siblings('li').removeClass('on').find('.adore').removeClass('bg_main');
                    swiper1.slideTo(thisI, 1000, false);
                }
            });
        })
      </script>     
    </div>