---------------------------------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(); });