swiper新闻大图滚动组合特效代码下载



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

27 106 36



特效描述:新闻大图滚动。swiper新闻大图滚动组合特效代码下载

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<section class="sec1">
    <div class="main">
        <!-- 基于swiper的新闻滚动组合1 -->
        <div class="title">基于swiper的新闻滚动组合1</div>
        <div class="w-newsList w-newsList1 clearfix" id="newsList1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="news-item"><a href="#" class="clearfix">
                        <div class="news-imgbox img-count"><div class="aspectRatio"></div><div class="img-count-in"><img src="images/img1.png"></div></div>
                        <div class="news-text">
                            <div class="date">
                                <div class="year">2020</div>
                                <div class="day_month">07-01</div>
                            </div>
                            <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题1</div>
                            <div class="news-sum">文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介介文字简介文字简介文字简介文字简介</div>
                            <div class="more"></div>
                        </div>
                    </a></div>
                </div>
                <div class="swiper-slide">
                    <div class="news-item"><a href="#" class="clearfix">
                        <div class="news-imgbox img-count"><div class="aspectRatio"></div><div class="img-count-in"><img src="images/img2.png"></div></div>
                        <div class="news-text">
                            <div class="date">
                                <div class="year">2020</div>
                                <div class="day_month">07-01</div>
                            </div>
                            <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题2</div>
                            <div class="news-sum">文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介介文字简介文字简介文字简介文字简介</div>
                            <div class="more"></div>
                        </div>
                    </a></div>
                </div>
                <div class="swiper-slide">
                    <div class="news-item"><a href="#" class="clearfix">
                        <div class="news-imgbox img-count"><div class="aspectRatio"></div><div class="img-count-in"><img src="images/img3.png"></div></div>
                        <div class="news-text">
                            <div class="date">
                                <div class="year">2020</div>
                                <div class="day_month">07-01</div>
                            </div>
                            <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题3</div>
                            <div class="news-sum">文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介介文字简介文字简介文字简介文字简介</div>
                            <div class="more"></div>
                        </div>
                    </a></div>
                </div>
            </div>
            <div class="adSN_page"></div>
            <div class="swiper-num">
                <span class="active"></span>/
                <span class="total"></span>
            </div>
        </div>
        <script type="text/javascript">
        $(function(){
            /*图片位置计算*/
            var imgCount = function () {
                $('.img-count').each(function (index, element) {
                    var imgH = $(this).height();
                    var imgW = $(this).width();
                    var $thisimg = $(this).find('img');
                    var img = new Image();
                    img.onload = function () {
                        if ($thisimg.data("img") === false) {
                            return '';
                        }
                        var imgWidth = img.width;
                        var imgHeight = img.height;
                        if ((imgWidth / imgHeight) < (imgW / imgH)) {
                            $thisimg.css({'height': (imgW / imgH) * ((imgHeight * 1.00) / imgWidth) * imgH, 'max-height': (imgW / imgH) * ((imgHeight * 1.00) / imgWidth) * imgH, 'top': -((imgW / imgH) * ((imgHeight * 1.00) / imgWidth) - 1) / 2 * imgH})
                        } else {
                            $thisimg.css({'width': (imgH / imgW) * ((imgWidth * 1.00) / imgHeight) * imgW, 'max-width': (imgH / imgW) * ((imgWidth * 1.00) / imgHeight) * imgW, 'left': -((imgH / imgW) * ((imgWidth * 1.00) / imgHeight) - 1) / 2 * imgW})     
                        }
                    }
                    img.src = $thisimg.attr("src");
                });
            }
            //滚动设置
            var swiper = new Swiper('#newsList1', {
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                direction : 'horizontal',
                loop: true,
                autoplay : {
                    delay:5000,//滚动速度
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.adSN_page',
                    clickable :true,
                },
                on:{
                    init:function(){
                        var total=this.slides.length-2;
                        $('.swiper-num .total').text('0'+total);
                        this.emit('transitionEnd');
                    },
                    transitionEnd:function(){
                        var index=this.realIndex+1;
                        $(".swiper-num .active").text("0"+index);
                    }
                }
            });
            imgCount();
            $(window).resize(function () {
                imgCount();
            });
        });
        </script> 
        <!-- 基于swiper的新闻滚动组合1 end-->
    </div>
</section>
<section class="sec2">
    <div class="main">
        <!-- 基于swiper的新闻滚动组合2 -->
        <div class="title">基于swiper的新闻滚动组合2</div>
        <div class="w-newsList w-newsList2 " id="newsList2">
            <div class="swiper-wrapper clearfix">
                <div class="swiper-slide">
                    <div class="news-item"><a href="#" class="clearfix">
                        <div class="img"><img src="images/img1.png"/></div>
                        <div class="news-text">
                            <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题1</div>
                            <div class="date">发布时间:2020-06-30</div>
                            <div class="news-sum">文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介介文字简介文字简介文字简介文字简介</div>
                            <div class="more"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div><div class="bgsqr3"></div><div class="bgsqr4"></div></div>
                        </div>
                    </a></div>
                </div>
                <div class="swiper-slide">
                    <div class="news-item"><a href="#" class="clearfix">
                        <div class="img"><img src="images/img2.png"/></div>
                        <div class="news-text">
                            <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题2</div>
                            <div class="date">发布时间:2020-06-30</div>
                            <div class="news-sum">文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介介文字简介文字简介文字简介文字简介</div>
                            <div class="more"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div><div class="bgsqr3"></div><div class="bgsqr4"></div></div>
                        </div>
                    </a></div>
                </div>
                <div class="swiper-slide">
                    <div class="news-item"><a href="#" class="clearfix">
                        <div class="img"><img src="images/img3.png"/></div>
                        <div class="news-text">
                            <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题3</div>
                            <div class="date">发布时间:2020-06-30</div>
                            <div class="news-sum">文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介介文字简介文字简介文字简介文字简介</div>
                            <div class="more"><span class="btn-inner">查看更多</span><div class="bgsqr1"></div><div class="bgsqr2"></div><div class="bgsqr3"></div><div class="bgsqr4"></div></div>
                        </div>
                    </a></div>
                </div>
            </div>
            <div class="adSN_page"></div>
        </div>
        <script type="text/javascript">
        $(function(){
            var swiper = new Swiper('#newsList2', {
                direction : 'horizontal',
                loop: true,
                autoplay : {
                    delay:5000,//滚动速度
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.adSN_page',
                    clickable :true,
                }
            });
        });
        </script> 
        <!-- 基于swiper的新闻滚动组合2 end -->
    </div>



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


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

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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