用原生js制作简单轮播图、tab切换

╰半橙微兮° 2022-11-27 12:10 272阅读 0赞

## 轮播效果 ##

**三种轮播效果：图片自动轮播、鼠标点击左右轮播、任意点击轮播**  
第一步：规定大框并引入图片，将图片包裹在一个很宽的div中，且设置初始的偏移量为0px；  
第二步：规定左右点击的箭头

<div id="container">
    		
    		<div id="list" style="left: 0px;">			
    			<img src="image/index1.jpg" alt="1" />
    			<img src="image/index2.jpg" alt="2" />
    			<img src="image/index3.jpg" alt="3" />
    			<img src="image/index4.jpg" alt="4" />
    			<img src="image/index5.jpg" alt="5" />
    			<img src="image/index6.jpg" alt="6" />
    		</div>
    		
    	<a href="javascript:;" id="prev" class="arrow"><</a>
    	<a href="javascript:;" id='next' class="arrow">></a>
    			
    	<div id="buttons">
    		<span index='1' class="on" ></span>
    		<span index='2'></span>
    		<span index='3'></span>
    		<span index='4'></span>
    		<span index='5'></span>
    		<span index='6'></span>
    	</div>
    </div>

第三步：用js写功能效果

<script type="text/javascript">
    // 1.页面加载完成的时候执行里面的定时器
    // 首先进行关联(一般id的都给关联起来)
    		window.onload= function(){ 
    		var container =	document.getElementById("container");
    		var list = document.getElementById("list");
    		var prev = document.getElementById("prev");
    		var next = document.getElementById("next");
    		var newlist = parseInt(list.style.left);
    		console.log(newlist);
    		var buttons = document.getElementById("buttons").getElementsByTagName('span');
    		console.log(buttons)
    		var timer;
    		var index = 1;
    // 2.开始操作偏移量的方法
    		function  animals(offset){ 
    			var  newlist= parseInt(list.style.left)+offset;
    			list.style.left = newlist+'px';
    // console.log(list.style.left)
    // 4.如何解决偏过头的问题? 
    // 判断偏移量大于最后一张的时候时,返回到第一张
    		if (newlist <-3001) { 
    			list.style.left = 0+'px'
    			list.setAttribute('class','list');
    		} 
    		
    		if (newlist >0) { 
    			list.style.left = -3000+'px';
    			list.setAttribute('class','list');
    		}
    		}
    // 7.点击左右两侧耳朵进行移动
    		prev.onclick = function(){ 
    			animals(-600)
    		}
    
    		next.onclick  = function(){ 
    			animals(600)
    		}
    // 3.把定时器包裹在自定义方法中,用于后面的使用
    		function play(){ 			
    		timer = setInterval(function(){ 
    			prev.onclick()
    		},2000);
    		}
    		play();
    // 6.清空定时器
    		function stop(){ 			
    		clearInterval(timer);
    		}	
    // 5.鼠标滑入到框中进行清空定时器,方便点击切换的过程
    // 鼠标划出时触发定时器,方便自动轮播
    		container.onmouseenter = stop;
    		container.onmouseleave = play;	
    		
    	
    // 第三种任意点击轮播
    // 1.需要先获取点击某一个小圆圈后的下标值
    // 2.判断到达两头是反向移动位置
    // 3.将点击的值和图片进行关联(自调函数[闭包])
    
    
    // 这是用来进行清空当前div的classname
    		function buttonsShow(){ 
    			for (var i =0;i<buttons.length;i++) { 
    				if(buttons[i].className=='on'){ 
    					buttons[i].className = ''
    				}
    				console.log(buttons[i])
    			}
    			buttons[index-1].className = 'on'
    		}
    		
    // 这是用来判断光标到两头时的过程
    		
    		prev.onclick = function(){ 
    			index+=1;
    			console.log(index)
    			if (index>6) { 
    				index = 1;
    			}
    				buttonsShow();	
    				animals(-600)
    			console.log(index)
    		}
    
    		next.onclick = function(){ 
    			index-=1;
    			if(index<1){ 	
    				index = 6
    			}
    			buttonsShow();
    			animals(600)
    		}
    	
    // 通过圆点的长度循环,使用自调函数进行操作
    	for (var i = 0; i<buttons.length; i++) { 
    		(function(i){ 
    // 获取被点击的圆圈中index的值
    			buttons[i].onclick= function(){ 
    			var newindex = this.getAttribute('index');
    			console.log(newindex)
    // 通过该值进行调用animal(offset)方法,
    // 计算偏移量
    			offset = 600*(index - newindex);
    			console.log(offset);
    			animals(offset);
    // 去掉默认的带色的小圆点,将点击的小圆点上色
    			index = newindex;
    			console.log(index)
    			buttonsShow();
    			}	
    		})(i)
    	}
    	}
    	</script>

## tab切换 ##

第一步：用html和css规定好基本样式

<input type="button" id="div1" value="tab1" index="0" />
        <input type="button" value="tab2" index="1"/>
        <input type="button" value="tab3" index="2"/>
        <input type="button" value="tab4" index="3"/>
    
        <div style="display:block">显示tab1</div>
        <div>显示tab2</div>
        <div>显示tab3</div>
        <div>显示tab4</div>

第二步：用js写切换的功能