关于轮播图，我知道的不多。

Posted 2020-08-21 hopeelephant

　　关于轮播图，我确实是知道的不多，想来想去就只是那么的多，。

　　不过我还是打算将自己知道的写出来，首先轮播图的布局，我先来上一张照片

　　简单的布局，视窗中我能见到的只有一张照片和左右两个按钮还有下面两个按钮，视窗的大小就是单张图片的大小，几个按钮用position定位的方式将其定位到想要的位置了，那么四副图片的直接父元素的宽度是多少呢，那就是四副图片的宽度相加的总和，一定的让图片display:block;这样才能去掉图片默认距离，。

　　在给图片float:left，在让最外层的盒子超出部分隐藏就可以了，。这样布局就算完成了。

　　在来说说用jquery怎么简单的写出想要的效果。

　　首先我们轮播图是怎样的效果呢，试想一下以前我们用的那种老式的胶卷的相机，每按一下

快门，相机的胶卷就走一下，对了就是这种效果，。

　　先上上代码

　　

var num=0;
        $(".buttons a").click(function(){
            num = $(this).index();
            var ml=num*-600+"px";
            $(".pic").animate({"margin-left":ml},500)
            $(this).addClass("red").siblings().removeClass("red");
            return false;            
        })

　　简单的解释一下这段代码，。首先申明一个变量var num=0;赋值是0，为什么是0呢，可以把这个当成是a的索引值，索引是从0开始的，所以先赋值为0；接着

当点击a标签的时候，获得当前a标签的索引，接着，在来获得图片外层盒子距离左边的距离，为了由动画效果，采用了.animate()方法，。为了让下面的按钮只是在点击当前按钮的时候才添加背景颜色，让其他的去掉颜色，这里用到的代码是$(this).addClass("red").siblings().removeClass("red");这段代码的意思是，给点击的这个元素添加类名，在去除选中的这个元素的其他的元素的类名就可以了，那最后为什么要添加return false;因为我们点击的是a元素，a是一个链接，是会刷新页面的，所以得加上return false;好了下面的按钮就可以了

在来看看，左右按钮

$(".next").click(function(){
            console.log(num);
            if(num<3){
                num=num+1;
            }else{
                num=0
            }
            var ml2 =num*-600 +"px";
            $(".pic").animate({"margin-left":ml2},500);
            $(".buttons a").eq(num).addClass("red").siblings().removeClass("red");
            return false;
        })
        $(".prev").click(function(){
            if(num>0){
                num=num-1;
            }else{
                num=3
            }
            var ml1 =num*-600 +"px";
            $(".pic").animate({"margin-left":ml1},500);
            $(".buttons a").eq(num).addClass("red").siblings().removeClass("red");
            return false;
        })

　　无论是点击左边的按钮还是右边的按钮我们都得做一下if  else判断，。判断完之后我们所得到的margin-left值还是当前元素的索引乘以单张图片的宽度，。最后加上$(".buttons a").eq(num).addClass("red").siblings().removeClass("red");就可以实现点击左右按钮的时候控制下面按钮的状态了

这是暂时实现轮播图需要做的一下小小的事情，。

　　海南岛，感谢川藏神兽毛琦拍的照片