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

Posted 决起而飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简要分析javascript的选项卡和轮播图相关的知识,希望对你有一定的参考价值。

选项卡

思路

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!

以上是关于简要分析javascript的选项卡和轮播图的主要内容,如果未能解决你的问题,请参考以下文章

东京商城主页中部商品分类和轮播图代码的编写

Android侧滑菜单和轮播图之滑动冲突

焦点控制切换和轮播

前端9bootstrap:模态框/轮播图,旅游首页

原生JS写一个淡入淡出轮播图

web前端设计必备网页特效案例 - 轮播图