使用jQuery实现图片循环滚动效果,当把光标移动图上,停止滚动;当把光标从图上移出后,图片继续滚动
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jQuery实现图片循环滚动效果,当把光标移动图上,停止滚动;当把光标从图上移出后,图片继续滚动相关的知识,希望对你有一定的参考价值。
求完整代码!
参考技术A <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css">
<style>
.swiper-wrapper
height: 300px;
.swiper-slide
display: flex;
justify-content: center;
align-items: center;
.swiper-slide:nth-child(1)
background: red;
.swiper-slide:nth-child(2)
background: green;
.swiper-slide:nth-child(3)
background: blue;
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
<script language="javascript">
var mySwiper = new Swiper(document.querySelector(".swiper-container"),
autoplay: true,
)
document.querySelector('.swiper-container').onmouseover = () =>
mySwiper.autoplay.stop();
document.querySelector('.swiper-container').onmouseout = () =>
mySwiper.autoplay.start();
</script>
</html>
请采纳
以上是关于使用jQuery实现图片循环滚动效果,当把光标移动图上,停止滚动;当把光标从图上移出后,图片继续滚动的主要内容,如果未能解决你的问题,请参考以下文章