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

轮播效果

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

	<!--步骤1.首先规定大框并引入6张图片-->	
	<div id="container">
		<!--将六个图片包裹在一个很宽的div中，且设置初始的偏移量为0px-->
		<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>
	<!--步骤2.写两侧的耳朵-->	
	<a href="javascript:;" id="prev" class="arrow">&lt;</a>
	<a href="javascript:;" id='next' class="arrow">&gt;</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写功能效果

	<!--第三步 开始写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>

    <style>
        div{
            display:none;
        }
        .active{
            background:yellow; //点击一个元素时它背景变成黄色
        }
    </style>

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

    <script>
        window.onload=function(){
            var aInput=document.getElementsByTagName('input');//获取到所有的input按钮,aInput是一个数组
            var aDiv=document.getElementsByTagName('div'); //获取到所有的div,aDiv是一个数组
            for(var i=0;i<aInput.length;i++){               //按钮数组
                aInput[i].index=i;                          //i是按钮数组的下标,把i赋值给index,这样通过index就知道点击的是哪个按钮
                aInput[i].onclick=function(){
                    for(var j=0;j<aInput.length;j++){      //通过点击按钮的时候再次循环按钮，是为了清空active类
                        aInput[j].className=''             //清空active类

                    }
                    for(var i=0;i<aDiv.length;i++){        //把所有的divde的display重新设置为none，就是不显示
                        aDiv[i].style.display='none'
                    }
                    aInput[this.index].className='active'  //点击哪个按钮就哪个按钮加active类
                    aDiv[this.index].style.display='block' //点击哪个按钮就把第几个div给显示出来
                }
            }
        }
    </script>