简要分析javascript的选项卡和轮播图

Posted 2020-10-26 决起而飞

选项卡

思路

1、按钮和展示的页面要对应：分别遍历，记住当前按钮的索引，让其成为展示页面的索引

2、只出现所对应的页面：所有的页面隐藏，只展示想要的页面

只展示js代码

       for(var i=0;i<input.length;i++){
                  input[i].index=i           //让浏览器解析html文档时,保存每一个input的索引    
                  input[i].onclick=function(){
                        for(var j=0;j<div.length;j++){   //所有的div为隐藏
                             div[j].style.display=‘none‘
                             input[j].className=‘‘
                       }
                      div[this.index].style.display=‘block‘ //只展示对应的页面
                      this.className=‘active‘
                  }
         }

轮播图

思路

一个完整的轮播图包含：自动播放；鼠标移入移除开始暂停；两边的按钮；下面的小轮播点

自动播放：涉及到定时器，

移入移除：mouseover和mouseout事件，开始/取消定时器

两边的按钮：左右移动，++--，图片和轮播点相对应

下面的轮播点：和选项卡差不多

整体的思路和选项卡差不多，但细微处还是得注意

规定

imDiv为图片div的集合

imgSpan为小轮播点的集合

one为右键two为左键

代码

function changeImage(){
              for(var i=0;i<imDiv.length;i++){
                    imDiv[i].style.display=‘none‘
                    imgSpan[i].style.background=‘#ccc‘
              }
              imDiv[index].style.display=‘block‘
              imgSpan[index].style.background=‘green‘
        }  

这一部分为改变图片和小轮播点的变色：原理和轮播图一样，先让所有的消失和原来的颜色；注意这里的index一开始为0

for(var i=0;i<imgSpan.length;i++){
             imgSpan[i].id=i
             imgSpan[i].onclick=function(){
                     index=this.id
                     changeImage()
             }
        }

这里部分为小轮播点的点击事件，为了让其对应相应的图片，可使用id或者自己setAttribute属性来记住索引，再执行轮播图片的对应代码

            images.onmouseover=function(){
                clearInterval(timer)
              }
            images.onmouseout=function(){
                timer=setInterval(function(){
                      index++
                      if(index>=imDiv.length){
                              index=0
                      }
                      changeImage()

                },2000)
             }
             images.onmouseout()

这里的代码是mouseover和mouseout事件，注意这里的if条件，防止超出应有的图片；后面的img.onmouseout直接自执行，一开始就执行

             one.onclick=function(){
                   index++
                   if(index>=imDiv.length){
                           index=0
                   }
                    changeImage()
             }
             two.onclick=function(){
                   index--
                   if(index<=0){
                           index=2
                   }
                    changeImage()
             }

这里的代码是两边的按钮点击事件，原理都是一样的；因为当你点击的时候，这里的定时器依然是在运行的，造成不好的用户体验；可以让其mouseover和mouseout让定时器关闭和开始，达到良好的用户体验。

总结

第一：不管是选项卡，还是轮播图，思路大致一样，都是先隐藏，谁该出现谁就出现；

第二：轮播图的播放封装成一个函数，有需求直接调用即可

第三：注意索引的对应，属性的灵活应用

第四：爱上原生javascript。

pretty funny！