使用swiper制作拓展效果（跑马灯）
1.swiper简介
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
其中包含的基础效果有很多，性能和效果都是非常好的，
2.swiper 制作跑马灯
需要配合使用最新的swiper 4.0 使用
.student-swiper {
position: relative;
}
.student-swiper-container {
position: relative;
overflow: hidden;
.swiper-slide {
width: 442px;
text-align: center;
line-height: 2em;
}
}
.swiper-button-next {
right: -42px;
}
.swiper-button-prev {
left: -42px;
}
.swiper-slide-img {
height: 276px;
overflow: hidden;
background: #fff;
border: 6px solid #fff;
img {
width: 100%;
}
} <div class="service-part04">
<div class="center w1100">
<div class="student-swiper">
<h4 class="service-title"><span>学员风采</span></h4>
<div class="student-swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide-img">
<img src="img/images/train_student_img_44.jpg" alt="">
</div>
<p>第01届高电压试验技术培训班</p>
</div>
<div class="swiper-slide">
<div class="swiper-slide-img">
<img src="img/images/train_student_img_44.jpg" alt="">
</div>
<p>第01届高电压试验技术培训班</p>
</div>
<div class="swiper-slide">
<div class="swiper-slide-img">
<img src="img/images/train_student_img_44.jpg" alt="">
</div>
<p>第01届高电压试验技术培训班</p>
</div>
<div class="swiper-slide">
<div class="swiper-slide-img">
<img src="img/images/train_student_img_44.jpg" alt="">
</div>
<p>第01届高电压试验技术培训班</p>
</div>
<div class="swiper-slide">
<div class="swiper-slide-img">
<img src="img/images/train_student_img_44.jpg" alt="">
</div>
<p>第01届高电压试验技术培训班</p>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<script>
$(function() {
new Swiper('.student-swiper .student-swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 5,
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
navigation: {
nextEl: '.student-swiper .swiper-button-next',
prevEl: '.student-swiper .swiper-button-prev',
},
on: {
progress: function(progress) {
console.log(progress)
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
//长度 221是每个swiper-slide宽度的一半
translate = slideProgress * modify * 221 + 'px';
scale = 1 - Math.abs(slideProgress) / 5;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
})
</script>
</div>
</div>
</div>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.08.31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录