jQuery 多图无缝滚动 + 鼠标移入暂停移出继续滚动

详看代码中那几点注释,可直接使用。
使用中注意.wrap的样式及jQuery中的修改
如果要用的话,建议使用最后一版,因为已经优化成不管添加多少个li都不用改wrap ul 中的宽度了。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.1.1.min.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			body{
				margin: 50px;
			}
			.wrap{
				border: 2px solid green;
				width: 800px;
				height: 135px;
				position: relative;
				overflow: hidden;
			}
			.wrap ul{
				
			/*一般情况下,想要使一个元素动起来,这个元素必须具有position属性
			position属性absolute/relative,视情况而定来使用*/
				overflow: hidden;
				width: 1600px;
				_height:1px;
				position: absolute;
				left: 0;
				top: 0;								
			}
			.wrap ul li{
				float: left;
			}
			.wrap ul li img{
				width:200px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				var oul = $('.wrap ul');
				var oulHtml = oul.html();
				//我们用代码方式将wrap ul 中的li增加一倍,方便滚动
				oul.html(oulHtml + oulHtml);
				setInterval(function(){	
					//向左滚动
					/*if(oul.css('left')=='-800px')
					{
						oul.css('left','0');
					}*/
					
					//向右滚动
					if(oul.css('left')=='0px')
					{
						oul.css('left','-800px');
					}
					oul.css('left','+=2px');
				},30);
			});
		</script>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li><img src="myimages/1.jpg" alt="" /></li>
				<li><img src="myimages/2.jpg" alt="" /></li>
				<li><img src="myimages/3.jpg" alt="" /></li>
				<li><img src="myimages/4.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>
将上面代码稍加改造,改成鼠标移入图片停止,移出图片继续滚动
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.1.1.min.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			body{
				margin: 50px;
			}
			.wrap{
				border: 2px solid green;
				width: 800px;
				height: 135px;
				position: relative;
				overflow: hidden;
			}
			.wrap ul{
				
			/*一般情况下,想要使一个元素动起来,这个元素必须具有position属性
			position属性absolute/relative,视情况而定来使用*/
				overflow: hidden;
				width: 1600px;
				_height:1px;
				position: absolute;
				left: 0;
				top: 0;								
			}
			.wrap ul li{
				float: left;
			}
			.wrap ul li img{
				width:200px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				var oul = $('.wrap ul');
				var oulHtml = oul.html();
				//我们用代码方式将wrap ul 中的li增加一倍,方便滚动
				oul.html(oulHtml + oulHtml);
				var timeId = null;
				
				//图片向左滚动或向右滚动代码
				function slider(){
					//向左滚动
					/*if(oul.css('left')=='-800px')
					{
						oul.css('left','0');
					}*/
					
					//向右滚动
					if(oul.css('left')=='0px')
					{
						oul.css('left','-800px');
					}
					oul.css('left','+=2px');
				};
				
				timeId = setInterval(slider,30);
				
				$('.wrap').mouseover(function(){
					clearInterval(timeId);
				});
				
				$('.wrap').mouseout(function(){
					timeId = setInterval(slider,30);
				});
				
			});
		</script>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li><img src="myimages/1.jpg" alt="" /></li>
				<li><img src="myimages/2.jpg" alt="" /></li>
				<li><img src="myimages/3.jpg" alt="" /></li>
				<li><img src="myimages/4.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>

最终优化版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.1.1.min.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			body{
				margin: 50px;
			}
			.wrap{
				border: 2px solid green;
				width: 800px;
				height: 135px;
				position: relative;
				overflow: hidden;
			}
			.wrap ul{
				
			/*一般情况下,想要使一个元素动起来,这个元素必须具有position属性
			position属性absolute/relative,视情况而定来使用*/
				overflow: hidden;
				_height:1px;
				position: absolute;
				left: 0;
				top: 0;								
			}
			.wrap ul li{
				float: left;
			}
			.wrap ul li img{
				width:200px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				var oul = $('.wrap ul');
				var oulHtml = oul.html();
				//我们用代码方式将wrap ul 中的li增加一倍,方便滚动
				oul.html(oulHtml + oulHtml);
				var timeId = null;
				
				//为了实现图片增加后css不用改,所以设为自动获取li数量,并动态添加宽度
				var ali = $('.wrap ul li');
				var aliWidth = ali.eq(0).width();
				var aliSize = ali.length;
				var ulWidth = aliWidth*aliSize;
				$('.wrap ul').css('width',ulWidth);
				
				
				
				var speed = 2;
				var min = "0px";
				var max = "-800px";
				
				//图片向左滚动或向右滚动代码
				function slider(){
					//向左滚动
					/*if(oul.css('left')=='-800px')
					{
						oul.css('left','0');
					}*/
					
					//向右滚动
					if(oul.css('left')==min)
					{
						oul.css('left',max);
					}
					oul.css('left','+='+speed+'px');
				};
				
				timeId = setInterval(slider,30);
				
				$('.wrap').mouseover(function(){
					clearInterval(timeId);
				});
				
				$('.wrap').mouseout(function(){
					timeId = setInterval(slider,30);
				});
				
				//以下是向向左走 向右走文字点击事件,不用删除即可
				$('.goLeft').click(function(){
					speed = -2;
					min = "-800px";
					max = "0px";
				});
				$('.goRight').click(function(){
					speed = 2;
					min = "0px";
					max = "-800px";
				});
				
			});
		</script>
	</head>
	<body>
		<a href="javascript:;" class="goLeft">向左走</a>
		<a href="javascript:;" class="goRight">向右走</a>
		<div class="wrap">
			<ul>
				<li><img src="myimages/1.jpg" alt="" /></li>
				<li><img src="myimages/2.jpg" alt="" /></li>
				<li><img src="myimages/3.jpg" alt="" /></li>
				<li><img src="myimages/4.jpg" alt="" /></li>
				<li><img src="myimages/5.jpg" alt="" /></li>
				<li><img src="myimages/6.jpg" alt="" /></li>
				<li><img src="myimages/7.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND