jQuery实现一组图片的水平滚动，当鼠标悬停时图片停止滚动。【方法2】

最新推荐文章于 2022-11-07 21:29:11 发布

weixin_43742901

最新推荐文章于 2022-11-07 21:29:11 发布

阅读量866

点赞数

CC 4.0 BY-SA版权

分类专栏： #JQuery也try一try

本文链接：https://blog.youkuaiyun.com/weixin_43742901/article/details/105917989

#JQuery也try一try 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用jQuery实现一组图片的水平滚动效果，并在鼠标悬停时暂停滚动，提供了一种实用的方法来增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
		<div id="con">
			<ul>
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/4.jpg"></li>
				<li><img src="img/5.jpg"></li>
				<li><img src="img/1.jpg"></li>
			</ul>
		</div>
	</body>

<style type="text/css">
			
			*{
				padding: 0;
				margin: 0;
			}
			#con{
				position: relative;
				height: 112px;
				width: 160px;
				margin: auto;
				/* overflow: hidden; */
				padding-top: 10px;
				background-color: #FF0000;
			}
			ul{
				width: 960px;
				list-style-type: none;
				position: absolute;
			}
			li{
				float: left;
				width: 160px;
			}
			img{
				width: 160px;
				
			}
		</style>

<script type="text/javascript" src="js/jquery.js"></script>
		<script>
			$(function(){//入口函数
				$ul = $('#con > ul');
				var speed = 0;
				function sroll(){
					//设定移动像素的速度，向左移动速度为10像素
					speed -=10;   
					// 如果像素 小于等于800px（每张图片160px,5张图片就是800px）
					// 则又把该速度变为0
					if(speed<=-800) speed=0; 
					//这样ul的left就会跟speed的变化而变化
 					$ul.css("left",speed+"px");   
				}
				//开个定时器，20毫秒执行一次，ul就可以动起来了
				var timer = setInterval(sroll,20);  
				//鼠标移上去，则清除定时器，即停止动画
				$ul.mouseover(function(){
					//setInterval方法会不停调用，只有在遇到clearInterval时才会停止
					clearInterval(timer);
				});
				//鼠标离开，继续执行定时器，即继续动画
				$ul.mouseout(function(){
					timer = setInterval(sroll,20);
				})
				
			})
			
		</script>