手写原创纯js实现轮播图

最新推荐文章于 2023-04-06 01:30:17 发布

Mr-nblee

最新推荐文章于 2023-04-06 01:30:17 发布

阅读量462

点赞数

文章标签： js 轮播图

本文链接：https://blog.csdn.net/lxw2017/article/details/104087318

版权

默认设定的图片宽度是1440px,如果有不同的可以自己对应修改即可

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>轮播图</title>
	<style type="text/css">
		html,body{
			height:100%;
			width: 100%;
			padding:0;
			margin:0;
		}
		ul,ol,li{
			padding:0;
			margin:0;
			list-style: none;
		}
		.container{
			position: relative;
			width: 1440px;
			height: 508px;
			left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-o-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			top: 20px;
			overflow: auto;
		}
		.container::-webkit-scrollbar {display:none}
		.banner{
			position: absolute;
			z-index: 100;
			width: 1000px;
			margin: 0 auto;
			left: 50%;
			text-align: center;
			line-height: 40px;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			-o-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
		}
		.main{
			height: 100%;
			width: 5760px;
			position: absolute;
		}
		#mainScroll{
			left: 0;
		}
		.main li{
			float: left;
			padding: 0;
			margin: 0;
			width: 1440px;
		}
		.main li img{
			width: 100%;
		}
		.prev-button{
			position: absolute;
		    width: 30px;
		    height: 30px;
		    z-index: 100;
		    top: 50%;
		    left: 20px;
		    transform: translate(0,-50%) rotate(45deg);
		    border: 3px solid rgba(255,255,255,.5);
		    border-right: none;
		    border-top: none;
		}
		.prev-button:hover{
			border: 3px solid rgba(255,255,255,.9);
			border-right: none;
		    border-top: none;
			cursor: pointer;
		}
		.next-button{
			position: absolute;
		    width: 30px;
		    height: 30px;
		    z-index: 100;
		    top: 50%;
		    right: 20px;
		    transform: translate(0,-50%) rotate(45deg);
		    border: 3px solid rgba(255,255,255,.5);
		    border-left: none;
		    border-bottom: none;
		}
		.next-button:hover{
			border: 3px solid rgba(255,255,255,.9);
			border-left: none;
		    border-bottom: none;
			cursor: pointer;
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="banner">这里是固定内容</div>
		<ul class="main" id="mainScroll">
			<li><img src="./img/commonfile_jpg_00b4a73f2a21b3a6e0bf7f37c6274ac7.jpg"></li>
			<li><img src="./img/commonfile_jpg_9c8ddad6e1544b66121b2918df07d461.jpg"></li>
			<li><img src="./img/commonfile_jpg_aa2402bfa2825f4453231d15de26a14c.jpg"></li>
			<li><img src="./img/focus_pic_youpin.jpg"></li>
		</ul>
		<div class="prev-button" id="prev"></div>
		<div class="next-button" id="next"></div>
	</div>
</body>
<script type="text/javascript">
	//定义偏移dom
	var main = document.getElementById('mainScroll');
	//设定偏移速度单元,50更慢，默认25为0.5秒执行完毕(25*20=500毫秒)
	var sLength = 25;
	var sTime = 20;
	//点击是否执行函数,避免快速重复点击
	var ifdo = true;
	main.style.left = '0px';
	//定义偏移函数
	function moveTo(startPosition,endPosition){
		if(ifdo){
			ifdo = !ifdo;
			var initial = startPosition;
			//获取变化量
			var shift = endPosition - startPosition;
			//每毫秒偏移的量，设定一秒钟完成移动
			var singleMove = shift/sLength;
			var tick = setInterval(function(){
				if((shift<0&&initial>endPosition)||(shift>0&&initial<endPosition)){
					if((shift<0&&(initial + singleMove)<endPosition)||(shift>0&&(initial + singleMove)>endPosition)){
						//精度调整
						main.style.left = endPosition + 'px';
						clearInterval(tick);
						ifdo = !ifdo;
						console.log('end')
					}else{
						main.style.left = initial + singleMove + 'px';
						initial = initial + singleMove;
					}
				}else{
					clearInterval(tick);
					ifdo = !ifdo;
					console.log('end')
				}
			},sTime)
		}
	}

	
	// 下一页
	document.getElementById('next').onclick = function(){
		var move = parseInt(main.style.left.split('px')[0]);
		if(-(move - 1440)!=main.children[0].offsetWidth*4){
			moveTo(move,move-1440)
		}
	}
	//上一页
	document.getElementById('prev').onclick = function(){
		var move = parseInt(main.style.left.split('px')[0]);
		if(move!=0){
			moveTo(move,move+1440)
		}
	}
	
</script>
</html>

Mr-nblee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写原创纯js实现轮播图

默认设定的图片宽度是1440px,如果有不同的可以自己对应修改即可<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轮播图</title> <st...
复制链接

扫一扫