---------------------------------html-----------------------------------
<div class="swiper-container stu" id="asd"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="scre02-slide"> <h3>1</h3> <img src="images/stu-02.png"> <span></span> <p>考试倒计时及学习记录等 根据时间安排学习进度</p> </div> </div> <div class="swiper-slide"> <div class="scre02-slide"> <h3>2</h3> <img src="images/stu-02.png"> <span></span> <p>考试倒计时及学习记录等 根据时间安排学习进度</p> </div> </div> <div class="swiper-slide"> <div class="scre02-slide"> <h3>3</h3> <img src="images/stu-02.png"> <span></span> <p>考试倒计时及学习记录等 根据时间安排学习进度</p> </div> </div> </div> </div>
---------------------------------css-----------------------------------
.swiper-slide{width: 160px;}
---------------------------------js-----------------------------------
var mySwiper = new Swiper('.stu', {
direction: 'horizontal',
loop: true,
autoplay: 1000,
slidesPerView: "auto",
centeredSlides:true,
spaceBetween: 20,
onSlideChangeStart: function (swiper) {
var slides = swiper.slides;
for (var i = 0; i < slides.length; i++) {
var src = slides.eq(i).children('.scre02-slide').children('img').attr('src');
if (slides.eq(i).attr('class').indexOf('swiper-slide-active') > -1) {
slides.eq(i).children('.scre02-slide').addClass('scre02-slide_hover');
if (src.indexOf('_hover') == -1) {
src = src.split('.png')[0];
slides.eq(i).children('.scre02-slide').children('img').attr('src', src + "_hover.png");
}
} else {
slides.eq(i).children('.scre02-slide').removeClass('scre02-slide_hover')
//console.log(2)
if (src.indexOf('_hover') > -1) {
src = src.split('_hover.png')[0];
slides.eq(i).children('.scre02-slide').children('img').attr('src', src + ".png");
}
}
}
},
});
$(".stu").mouseenter(function() {
mySwiper.stopAutoplay();
}).mouseleave(function() {
mySwiper.startAutoplay();
});
