HTML轮播图

关于如何做一个轮播图

运用了js和CSS相关知识。

首先创建如下三个div

<div class="content">//总体
    <div class="imglist">//图片列表
    </div>
    <div class="linebutton">//下面的按钮
    </div>
</div>

接着运用无序表格将所需图片列出，本文章选取了6个图片作为例子。

 <div class="imglist">
        <li class="list1"><img src="picture1/list1.jpg"alt=""></li>
        <li class="list2"><img src="picture1/list2.jpg"alt=""></li>
        <li class="list3"><img src="picture1/list3.jpg"alt=""></li>
        <li class="list4"><img src="picture1/list4.jpg"alt=""></li>
        <li class="list5"><img src="picture1/list5.jpg"alt=""></li>
        <li class="list6"><img src="picture1/list6.jpg"alt=""></li>
    </div>

相应的给出六个按钮

<div class="linebutton">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

将页面和表格边角清零并将表格序号清除。

将图片用position：absolute定位（使其重叠在一起还不是竖直排列）之后可以用PxCook软件测出图片偏移量 。

以我的需求为例，代码如下

    .list1{
        transform: translateX(0);
    }
    .list2{
        transform: translateX(235px);
    }
    .list3{
        transform: translateX(730px);
    }

之后的原理相同。

.linebutton span{
        display: inline-block;//使其横向排列，span本不可定义宽高，弄成
        块之后即可。
        width: 35px;
        height: 3px;
        background-color: #cccccc;
    }

并将其居中。

在此之后，运用优先显示等级，将list1、list2、list3调整，

显而易见，list2优先级最高。

既然要做出左右两边的图片有所缩小，那么就要用到scale去缩小。具体缩小程度按个人喜好。不过在此会有一个旋转基点（transform-origin）的转换。具体按照自己需要调整即可。

然后就是要设置按钮的颜色了。具体操作如下：

var index=0;//设基准为0
var aSpan=document.querySelectorAll("span");//获取到所有的span元素
function setLinebuttonColor() {
        for (var i=0,len=aSpan.length;i<len;i++){
            aSpan[i].style.background="#ccc";//此颜色为初始颜色
        }
        aSpan[index].style.background="#45c17c";//要变换的颜色
    }
    setLineBColor();//执行这个函数

现在需要用js写可以使其转换的代码了。由于向右转换和向左转换原理几乎一样，故在此只展示向右转换的代码。

var ListName=["list1","list2","list3","list4","list5","list6"];
 function NextPicture() {
        ListName.unshift(aListName[5]);//把最后一个复制并插到第一个
        ListName.pop();//删除最后一项
        for (var i=0,len=aLi.length;i<len;i++){
            aLi[i].setAttribute("class",aListName[i]);
        }
        index++;
        if(index>5){
            index=0;
        }
        setLinebuttonColor();
    }
    var list1=document.querySelector(".list1");
    var list3=document.querySelector(".list3");
    var imgList=document.querySelector(".imglist");
    imgList.addEventListener("click",function (pi)//运用了监听判断是否为现在的list3,，而不是最初始的list3。
        {
        if(pi.target.parentNode.getAttribute("class")==="list3")
        {
            NextPicture();
        }
        else if(pi.target.parentNode.getAttribute("class")==="list1")
        {
            PreviousPicture();
        }
    })

那么最后只剩下让其自动向右转换了，这个涉及了js中的setInterval（）函数。具体代码如下：

function next() {
        setInterval(NextPicture,4000);//单位为毫秒，即每隔4秒执行一次NextPicture函数。
    }
    next() //执行next函数

到此也就结束了。