一款swiper.js宽屏的图片慢慢变小的轮播切换特效,图片载入后慢慢变小然后切换到下一张图片,可以点击小圆点按钮切换,或者点击向下的箭头来切换,控制的自由度还是比较高的,喜欢的童鞋请收下吧。
页面的head部分,需引入两个必要的CSS样式文件,代码如下:
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/swiper.min.css">
页面的body部分,将需要轮播的图片放入指定的div容器里,代码如下:
<div class="index-banner">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image/bg1.jpg" alt=""></div>
<div class="swiper-slide"><img src="image/bg2.jpg" alt=""></div>
<div class="swiper-slide"><img src="image/bg3.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next1"></div>
</div>
</div>
页面的底部,先引入jQuery库和swiper.min.js插件,然后设置轮播其他响应内容和参数,代码如下:
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/swiper.min.js"></script>
<script type="text/javascript">
var winh = $(window).height();
var winhh = winh-44;
$('.index-banner').css('height',winhh);
setInterval("ss()",100);
function ss(){
$('.swiper-slide').each(function(){
if($(this).hasClass('swiper-slide-active')){
$('.swiper-slide').removeClass('swiper-slide-on');
$(this).addClass('swiper-slide-on');
}
})
}
</script>
<!-- Initialize Swiper -->
<script>
var swiperV = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
spaceBetween: 30,
hashnav: true,
hashnavWatchState: true,
loop: true,
autoplay: 5000,
/*触碰后还能够继续轮播*/
autoplayDisableOnInteraction: false,
nextButton:'.swiper-button-next1',
effect : 'fade',
fade: {
crossFade: false,
}
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791