jQuery学习:平滑翻页（自动部分点击切换页面）

最新推荐文章于 2023-03-17 12:12:39 发布

¡Venceremo

最新推荐文章于 2023-03-17 12:12:39 发布

阅读量591

点赞数

分类专栏： jquery 文章标签： jquery 学习 javascript

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127843581

版权

jQuery 图片轮播平滑滚动动态效果 JavaScript

关键词由CSDN通过智能技术生成

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#outer {
			width: 420px;
			height: 300px;
			background-color: #bfa;
			margin: 50px auto;
			padding: 10px 0;
			position: relative;
	overflow: hidden;

		}

		#imgList {
			list-style-type: none;
			/* 开启定位移动 */
			position: absolute;
			/* 	每次显示到下一张图片 420px */
			/* left: -420px; */

		}

		#imgList li {
			float: left;
			margin: 0 10px;

		}

		#imgList img {
			width: 400px;
			height: 300px;

		}

		#navDiv {
			position: absolute;
			bottom: 15px;
			/* 
			outer:宽度420
			navDiv:(宽度 ：超链接宽度+margin*2)*6个=15+10=25*6=150
			420-150=270
			270/2=135_不能写死
			 */
			/* left: 135px; */
		}

		#navDiv a {
			float: left;
			width: 15px;
			height: 15px;
			background-color: red;
			margin: 0 5px;
			opacity: 0.5;
			/* 	兼容IE8的半透明 */
			filter: alpha(opacity=50);
		}

		#navDiv a:hover {
			background-color: black;
		}

		#prev {
			position: absolute;
			bottom: 150px;
			font-size: 12px;
			text-align: center;
			line-height: 15px;
			text-decoration: none;
			width: 15px;
			height: 15px;
			background: yellow;
			float: left;

		}

		#next {
			bottom: 150px;
			position: absolute;
			font-size: 12px;
			text-align: center;
			line-height: 15px;
			text-decoration: none;
			width: 15px;
			height: 15px;
			background: yellow;
			left: 400px;

		}
	</style>
	<script src="js/jquery-3.6.1.js"></script>
	<script src="../javascript/tool动画.js"></script>
	<script>
		$(function () {
			var $outer = $('#outer');
			var $imgList = $('#imgList');
			var $a = $('#navDiv>a');
			var $next = $('#next');
			var $prev = $('#prev');
			var pageWidth = 420;//移动一页的宽度
			var TIME = 400;//翻页持续时间
			var ItemTime=20;//单元移动的间隔时间 
			//设置图片容器的宽度
			$imgList.css('width', pageWidth * $imgList.children().length);
			//点击向左向右的图标进行平滑翻页
			$prev.click(function () {
				nextPage(false); //是否翻到下一页

			});
			$next.click(function () {
				nextPage(true); //是否翻到下一页 是下页
			});

			function nextPage(next) {
				//得到当前的图片位置 然后进行偏移
				//相对父元素左上角的坐标
				var curLeft = $imgList.position().left;
				//总偏移量 offest
				var offest = next ? -pageWidth : pageWidth;
				//目标位置偏移量
				var targetLeft=curLeft+offest;
				//总时间 TIME
				//单元移动的间隔时间 ItemTime=20
				//单元移动偏移量
				var itemOffest=offest/(TIME/ItemTime);
				//使用循环定时器--到达目标停止定时器
				
				var num1= setInterval(function(){
					//计算最新的left
					curLeft+=itemOffest;//先增加 再判断
					if(curLeft===targetLeft){//到达目标位置
						clearInterval(num1);	
					}
					
					//设置偏移
					$imgList.css("left",curLeft);
				},ItemTime)

				
			};
		})
	</script>
</head>

<body>
	<div id="outer">
		<ul id="imgList">
			<li>
				<img src="../img/a5.png" alt="图片">
			</li>
			<li>
				<img src="../img/a0.png" alt="图片">
			</li>
			<li>
				<img src="../img/a1.png" alt="图片">
			</li>
			<li>
				<img src="../img/a2.png" alt="图片">
			</li>
			<li>
				<img src="../img/a3.png" alt="图片">
			</li>
			<li>
				<img src="../img/a4.png" alt="图片">
			</li>
			<li>
				<img src="../img/a5.png" alt="图片">
			</li>
			<li>
				<img src="../img/a0.png" alt="图片">
			</li>

		</ul>
		<div id="navDiv">
			<a href="javascript:;" class=""></a>
			<a href="javascript:;" class=""></a>
			<a href="javascript:;" class=""></a>
			<a href="javascript:;" class=""></a>
			<a href="javascript:;" class=""></a>
			<a href="javascript:;" class=""></a>
		</div>
		<a href="javascript:;" id="prev">
			< </a>
				<a href="javascript:;" id="next"> > </a>
	</div>


</body>

</html>

中间还存在些许问题再后面会有改进目前的效果和预想的一致

实现点击切换的步骤

function nextPage(next) {
				//得到当前的图片位置 然后进行偏移
				//相对父元素左上角的坐标
				var curLeft = $imgList.position().left;
				//总偏移量 offest
				var offest = next ? -pageWidth : pageWidth;
				//目标位置偏移量
				var targetLeft=curLeft+offest;
				//总时间 TIME
				//单元移动的间隔时间 ItemTime=20
				//单元移动偏移量
				var itemOffest=offest/(TIME/ItemTime);
				//使用循环定时器--到达目标停止定时器
				
				var num1= setInterval(function(){
					//计算最新的left
					curLeft+=itemOffest;//先增加 再判断
					if(curLeft===targetLeft){//到达目标位置
						clearInterval(num1);	
					}
					
					//设置偏移
					$imgList.css("left",curLeft);
				},ItemTime)

				
			};