简单说说tab标签页和轮播图

Posted 2020-08-19 hopeelephant

　　准确的来说，一个页面能够独立的做出轮播图才算是刚步入前端世界。说轮播图之前先来说说标签页，。因为它比较简单，我的效果使用jquery来实现的，。

　　具体代码只有一点点，。

var timeout;
        $(document).ready(function(){
            $("#tabfirst li").each(function(index){
                var liNode=$(this);
                liNode.click(function(){
                    timeout=setTimeout(function(){
                        $(".show").removeClass("show");
                        $("#tabfirst li.tabin").removeClass("tabin");
                        $(".banner img").eq(index).addClass("show");
                        liNode.addClass("tabin");    
                    },300);
                }).mouseout(function(){
                    clearTimeout(timeout);
                });
        
            });
            

        });
            

　　我设的是点击事件，当然也可以是鼠标悬浮，只需要将click改成hover就可以了，另外，由于是鼠标放在li标签上实现效果，所以，需要先遍历一下li标签，用.each遍历。好了，在申明一个变量liNode赋值给$(this),也就是当前的li标签，另外设置点击事件，点击之后执行一个函数，先移除类名为show和类名为tabin的元素，也就是刷新页面直接显示出来的内容和相对应的类名移除，移除了之后再添加点击的时候的内容和标签的类名。最后在设置一个定时器，setTimeout,鼠标移除的时候清除定时，clearTimeout.如此一来标签页就出来了。

　　再来说一下轮播图，。

　　

　　首先我们来说一下，轮播图布局，。先设置一个大盒子，大盒子里面放三个小盒子，第一个小盒子里面放图片，第二个盒子放下面的图片相对应的几个按钮，第三个盒子里面放左右按钮，。另外最大盒子的宽和高就设成单张图片的宽高，再overflow:hidden.这样就只显示一张图片了，另外图片的父级的宽度就设成几张图片的宽度，高度就是单张图片的高度。在给下面的按钮和左右的按钮定位就可以放到自己想要的位置了。这样布局就完成了。

　　下面再来看看js这一块，。

　　首先写上window.onload = function (){}当然你不写window.onload也行，但是你得把js代码放在内容的后面，。接着，再来申明变量，赋值给每一个元素节点，。

　　另外就是几个函数方法来控制了，先来看看点击函数，当点击左右按钮的时候，图片滑动一个图片的宽度向左或者像右，这里要注意一点

if (index == 1) {
index = 5;
}
else {
index -= 1;
}，当index是1的时候，也就是图片是第一张的时候，在点击的时候就会跳到第五张，。否则就是自减1.

if (index == 5) {
index = 1;
}
else {
index += 1;
}同样，这和上面是同理。

function showButton() {
                for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == \'on\'){
                        buttons[i].className = \'\';
                        break;
                    }
                }
                buttons[index - 1].className = \'on\';
            }

　　当点击左右按钮的时候下面的几个小按钮也会跟着向前走一步，。最后在再点击函数里面调用

showButton()，

　　接着我们要来设单张图片划过去的时间，间隔，这样就可以算出次数，最后就可以求出速度，。

  var go = function (){
                    if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
                        list.style.left = parseInt(list.style.left) + speed + \'px\';
                        setTimeout(go, inteval);
                    }
                    else {
                        list.style.left = left + \'px\';
                        if(left>-200){
                            list.style.left = -600 * len + \'px\';
                        }
                        if(left<(-600 * len)) {
                            list.style.left = \'-600px\';
                        }
                        animated = false;
                    }
                }
                go();

　　最后用speed来穿插一个go函数，speed就是单次位移的距离，。这样一个轮播图基本就出来了。