没事写着玩的轮播器

最新推荐文章于 2024-07-20 19:19:29 发布

小亮崽

最新推荐文章于 2024-07-20 19:19:29 发布

阅读量82

点赞数

分类专栏： JS效果

本文链接：https://blog.csdn.net/qq_31533733/article/details/100520681

版权

JS效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		li{
			list-style-type: none;
		}
		#scroll{
			position: relative;
			overflow:hidden;
		}
		#scroll>ul{
			width:500%;
			height:300px;
		}
		#scroll>ul>li{
			width:20%;
			height:100%;
			display: inline-block;
			float:left;
		}
		#scroll>ul>li:nth-child(1){
			background:red;
		}
		#scroll>ul>li:nth-child(2){
			background:yellow;
		}
		#scroll>ul>li:nth-child(3){
			background:green;
		}
		#scroll>ul>li:nth-child(4){
			background:gray;
		}
		#scroll>ul>li:nth-child(5){
			background:orange;
		}

		#scroll>#left,#scroll>#right{
			font-size:50px;
			position: fixed;
			cursor: pointer;
		}
		#scroll>#left{
			top:100px;
			left:50px;
		}
		#scroll>#right{
			top:100px;
			right:50px;
		}
	</style>
</head>
<body>
	<div id="scroll">
		<span id="left"><</span>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<span id="right">></span>
	</div>
</body>

   <script>
		var div = document.getElementById("scroll");
		var left = document.getElementById("left");
		var right = document.getElementById("right");
		var li  = div.querySelectorAll("ul li");
		var lock = true;
		let sleep = 10;//步长
		var innerWidth = window.innerWidth;
		
		left.onclick = function(){
			if(lock){
				lock = false;
				let liLength = li.length;
				if(div.scrollLeft / innerWidth == 0){
					let sleep2 = sleep * liLength;
					let index = 0;
					let returnLast = setInterval(()=>{
						 index += sleep2;
						 console.log(div.scrollLeft)
						 div.scrollLeft += sleep2;
						if(index >= innerWidth * liLength - 1){
							clearInterval(returnLast);
							lock = true;
						}
					},1)
				}else{
					move("left");
				}
			}
		}
		
		right.onclick = function(){
			if(lock){
				lock = false;
				let liLength = li.length;
				if(div.scrollLeft / innerWidth == liLength - 1){
					let sleep2 = sleep * liLength;
					let index = div.scrollLeft;
					let returnFirst = setInterval(()=>{
						index -= sleep2;
						div.scrollLeft -= sleep2;
						if(index <= 0){
							clearInterval(returnFirst);
							lock = true;
						}
					},1)
				}else{
					move("right");
				}
			}
		}
		
		function move(state){
			if(!state) throw new Error("请传入参数");
			let index = 0;
			if(state == "right"){
				let rightInterVal = setInterval(()=>{
					dir("right",rightInterVal);
				},1)
			}
			
			if(state == "left"){
				let leftInterVal = setInterval(()=>{
					dir("left",leftInterVal);
				},1)
			}
			
			
			function dir(dirState,fn){
				var thisSleep = sleep;
				index += thisSleep;
				
				if(index > innerWidth){
					thisSleep += innerWidth - index;  //-8
				}
				
				if(dirState == "left"){
					div.scrollLeft-= thisSleep;
				}else if(dirState == "right"){
					div.scrollLeft+= thisSleep;
				}

				if(index >= innerWidth){
					clearInterval(fn);
					lock = true;
				}
			}
		}
		
		
		setInterval(()=>{
			simulateClick(right);  //模拟事件点击
		},5000)
		
      function simulateClick(element) { // 模拟 浏览器的鼠标点击事件
        const event = new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: true
        });
        element.dispatchEvent(event);      
      }
		
   </script>
</html>

小亮崽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
没事写着玩的轮播器

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
复制链接

扫一扫