html图片左右无缝循环滚动示例

全栈程序员站长

发布于 2022-09-09 10:27:08

10.6K0

发布于 2022-09-09 10:27:08

大家好，又见面了，我是你们的朋友全栈君。

首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。下面是代码实现和demo

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/center.js"></script>

	</head>

	<style type="text/css">
		.img_content {
			width: 600px;
			margin: 0;
			padding: 0;
			height: 200px;
			position: absolute;
			overflow: hidden;
		}
		
		.img_content ul {
			list-style: none;
			margin: 0;
			padding: 0;
			position: absolute;
			width: 1000px;
		}
		
		.img_content ul li {
			float: left;
			margin: 0;
			padding: 0;
		}
		
		.img_content ul li img {
			width: 200px;
			height: 200px;
		}
		
		button {
			width: 100px;
			height: 40px;
			border-radius: 5px;
			background: cornflowerblue;
			color: white;
			border: 0;
		}
	</style>

	<body>

		<div class="img_content">

			<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/6.jpg" /> </li>
				<li><img src="img/7.jpg" /> </li>
				<li><img src="img/8.jpg" /> </li>

			</ul>
		</div>

		<button id="left">左</button>
		<button id="right">右</button>
		<button id="auto">自动切换</button>
		<button id="stop">取消自动切换</button>

		<script>
			centerParent($('.img_content')[0]);

			$('#left').click(function() {
				scrollLeft();
			});

			$('#right').click(function() {
				scrollRight();
			});

			/*向左滑动*/
			function scrollLeft() {

				/*先向左移动一个图片的宽度  移动后在末尾追加第一个元素 然后将第一个元素移除 */
				$('ul').animate({
					left: -200
				}, 200, function() {
					$('ul').append($('ul li:first').clone());
					$('ul li:first').remove();
				});

				/*将left值置为0*/
				$('ul').animate({
					left: 0
				}, 0);
			}

			/*向右滑动*/
			function scrollRight() {
				/*先向右移动一个图片的宽度  移动后把最后一个元素插入到头部 然后移除最后一个元素*/
				$('ul').animate({
					left: -200
				}, 0, function() {
					$('ul').prepend($('ul li:last').clone());
					$('ul li:last').remove();
				});

				/*完成上面动作后将left置为0*/
				$('ul').animate({
					left: 0
				}, 200);
			}

			var auto;
			$('#auto').click(function() {
				auto = setInterval(scrollLeft, 2000);
			});

			$('#stop').click(function() {
				clearInterval(auto);
			});
		</script>

	</body>

</html>

demo

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/161314.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java