使用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实现图片循环滚动效果,当把光标移动图上,停止滚动;当把光标从图上移出后,图片继续滚动的主要内容,如果未能解决你的问题,请参考以下文章

jquery怎么实现手机触屏图片滑动代码,手向左或向右滑动,图片滑动。不滑动的时候图片自动循环滚动

wpf 一行图片无缝的滚动

jquery跑马灯效果

使用jQuery实现向上循环滚动效果(超简单)

jquery实现文字上下循环无缝滚动效果

jquery实现文字上下循环无缝滚动效果