table 切换效果

一：table栏切换简单模板

   1.1：首先定义几个必须用到的css样式

       当h5的标签被添加show类别的时候，就会显示；当h5里的标签被添加hidden_样式的时候就会被隐藏。

.hidden_{
       display：none；
        }
.show{
       display：block；
        }
 
​.active{
  color:red;
}
 

给出作为公共元素使用的几个h5标签

 <div class="box">
			<div class="table_change_box">
				<div class="table_change_h">
					<h6 class="show_h">这是第一个标题</h6>
					<h6 class="show_h">这是第二个标题</h6>
					<h6 class="show_h">这是第三个标题</h6>
				</div>
				<div class="table_change_section">
					<div class="artical_1_section">
						<img src="" />这是第一张图片
					</div>
					<div class="artical_1_section">
						<img src="" />这是第二张图片
					</div>
					<div class="artical_1_section">
						<img src="" />这是第三张图片
					</div>
				</div>
			</div>
		</div>

1.2：下面给出控制table栏切换的js代码

  //这里是指南的tabel切换的程序
            let showTabel_ = document.querySelectorAll(".show_h")
             //这里的show_h为table栏切换的作为标题的那一个栏目的类名
            let showSection_ = document.querySelectorAll(".artical_1_section")
             //这里的artical_1_section为table切换作为内容的那个栏目的类名
            for (let i = 0; i < showTabel_.length; i++) {
                showTabel_[i].addEventListener("mouseenter", function() {
                    for (let j = 0; j < showSection_.length; j++) {
                        showSection_[j].classList.add("hidden_")
                    }
                    showSection_[i].classList.remove("hidden_")
                    showSection_[i].classList.add("show")
                })
            }
            // tabel切换完成

1.3：这里提出另外一种可以改进代码的地方，但是要注意改进后的代码有条件限制。

//这里是指南的tabel切换的程序
			let showTabel_ = document.querySelectorAll(".show_h")
			let showSection_ = document.querySelectorAll(".artical_1_section")
			for (let i = 0; i < showTabel_.length; i++) {
				showTabel_[i].addEventListener("mouseenter", function() {
                         //这里是排他思想的简写方式，不需要通过for循环把所有的对象遍历一遍
                         //而是直接找到拿个目前还存在特殊样式的元素，把他处理掉
					let show_h_now = document.querySelector(".show_h")
                         show_h_now.classList.remove("show")
                   
					showSection_[i].classList.remove("hidden_")
					showSection_[i].classList.add("show")
				})
			}
			// tabel切换完成

 1.3.1代码的限制条件 
         1.：首先在改进后的代码里必须存在一个默认显示的栏目，不然会因为找不到show_h_now对象而报错，必须有一个栏目自带show样式，不然系统会报错。

   1.3.2代码可以继续改进的地方
         1.常用的table切换的标题部分，即文中的show_h对象通常会跟着内容的切换添加不同的样式，方便人们区分现在到底在哪个栏目。需要给切换的标题栏添加要求的样式，如下轮播图示例。

二：轮播图的简单模板
    1.做出轮播图的步骤
        1.1首先我们给出一个显示函数 

let title_ = document.querySelectorAll(".show_h ") //获取轮播图的标注内容
			let picture = document.querySelectorAll("img ") //获取图片
			function showf(j) { //给一个显示图片和文字的函数，只显示指定的第j张图片和第j个标题
				for (let i = 0; i < user_.length; i++) {
					picture[i].classList.add("hidden_") //让所有的图片都隐藏
					picture[i].classList.remove("show")
					title_[i].classList.remove("active")  //去掉图片对应的标题的css特殊样式
				}
				picture[j].classList.remove("hidden_") //让指定的图片显示
				picture[j].classList.add("show")
				title_[j].classList.add("active")//给指定的图片对应的标题添加css样式
			}

 在上述代码种添加对应的样式为标题里的子变为红色，可以跟据不同的需求来自己添加。

2.我们通过间歇函数，就可以做出轮播图自动播放的效果

         function show_auto(x) { //  自动播放函数  ，让i每个两秒递增，然后显示第i个标题和图片
				auto_t = setInterval(function() {
					x < user_.length ? x = x : x = 0
					showf(x)
					x++
				}, 2000)
			}
			window.addEventListener("DOMContentLoaded", show_auto) //当页面加载完开始自动播放

需要指出的是，这里的间歇函数计时器auto_t必须为全局变量，这样方便对轮播图做后续的处理

3.当鼠标进入图片或者标题时，需要让图片停止自动播放，并切换到相应的图片位置

 3.1通过事件监听来进行代码实现

  for (let i = 0; i < user_.length; i++) {
				title[i].addEventListener("mouseenter", function(e) { //鼠标进入第几个标题 
               显示第几张图
					clearInterval(auto_t) //停止计时器
					showf(i)   //展示第i张图片
				})
				picture[i].addEventListener("mouseenter", function() {
					clearInterval(auto_t) //鼠标进入图片的时候停止计时器
				})
				picture[i].addEventListener("mouseleave", function() {
					show_auto(i + 1) //鼠标离开图片从下一张图继续自动播放
				})
			}
 

3.1注意事项

  在上述的代码中，默认了标题部分在图片内容内部，所以并没有给标题部分加重新开启自动播放函数的命令，因为离开了标题部分就是进入了图片内部

 即黄色的位置为内容部分，黑色的为标题部分，如果不是这样需要重新开启自动播放函数

4.改进

常用的轮播图都会有向左滑动或者向右滑动的按钮，在这里因为篇幅问题没有添加进去