swiper.js
.swiper-container {
width: 100%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-wrapper{
transition-timing-function: linear !important;
}
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
slidesPerView: 4,
speed: 15000,//匀速时间
autoplay: {
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: false,
}
});
$('.swiper-wrapper').mouseenter(function () {
console.log(mySwiper.getTranslate());
mySwiper.setTranslate(mySwiper.getTranslate()); //设定偏移量
});
// 鼠标移出开始自动滚动
$('.swiper-wrapper').mouseleave(function () {
mySwiper.setTranslate(-1450); //设定偏移量
})
It's a bit flawed, but it's better than masturbating yourself.
What is -1450? ? ?
The above code will cause problems when the window is zoomed in and out.
There are a lot of csdn search image marquees, and I have been studying it for so long. . . .
bai-wrapper is the first layer of div
a is the second layer of div wrapping img
mylsRunHorseLight: function () {
var that = this;
if (mylsTimer !== undefined) {
clearInterval(mylsTimer);
}
var domItem = $('.bai-wrapper');
if (domItem != null) {
var lis = domItem.children('a');
var lisTotalWidth = 0;
var resetWidth = 0;
for (var i = 0; i < lis.length; i++) {
lisTotalWidth += lis[i].offsetWidth;
}
for (var i = 1; i <= lis.length / 4; i++) {
resetWidth += lis[i].offsetWidth;
}
that.mylsTimerFun(resetWidth, domItem);
$(".bai-wrapper").hover(function () {
clearInterval(mylsTimer);
}, function () {
clearInterval(mylsTimer);
that.mylsTimerFun(resetWidth, domItem)
})
}
},
mylsTimerFun: function (resetWidth, domItem) {
mylsTimer = setInterval(function () {
left -= 1;
if (left % resetWidth === 0) {
$('.bai-wrapper').append($(".bai-wrapper a:first"))
}
if (left <= -resetWidth) {
left = 0;
}
domItem.css('left', left + 'px');
}, 50);
},