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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

26 103 35



特效描述:图文标题滚动。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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到