特效描述：新闻大图滚动。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>
