JavaScript简易轮播图的实现

javascript简易的轮播图，需要实现三个功能：

1.鼠标放在小点上实现轮播

2.点击焦点按钮实现轮播

3.自动轮播

轮播图的原理：

一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量达到图片的切换。

HTML代码

 <div id="all">
        <div class="box">
            <ul>
                <li><img src="./1.jpg" alt=""></li>
                <li><img src="./2.jpg" alt=""></li>
                <li><img src="./3.jpg" alt=""></li>
                <li><img src="./4.jpg" alt=""></li>
            </ul>
            <ol>

            </ol>
        </div>
        <div class="btn" id="btn">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>

css代码

 *,
    body {
        margin: 0;
        padding: 0;
    }

    #all {
        position: relative;
        margin: 100px auto;
        width: 800px;
        height: 300px;
    }

    .box {
        position: relative;
        width: 800px;
        height: 300px;
        overflow: hidden;
    }

    .box ul {
        width: 1000%;
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    .box ul li {
        float: left;
    }

    .box ul li img {
        width: 800px;
        height: 300px;
    }
    .box ol{
        position: absolute;
        right:30px;
        bottom:20px;
    }
    .box ol li{
        width: 15px;
        display: inline-block;
        height: 15px;
        margin: 0 3px;
        cursor: pointer;
        line-height: 15px;
        text-align: center;
        background-color: #fff;
    }
    .box ol .current{
        background-color:orange;
        color:red;
    }
    .btn{
        position: absolute;
        left:0;
        top:50%;
        width:800px;
        height:30px;
        padding:0 10px;
        box-sizing: border-box;
        display: none;
    }
    .btn span{
        display: inline-block;
        width:25px;
        height:30px;
        line-height: 30px;
        font-size: 24px;
        color:black;
        text-align: center;
        background: rgba(255, 255, 255, 0.9);
        cursor: pointer;

    }
    #left {
      float: left;
    }
 
    #right {
      float: right;
    }

JS代码

var index = 0;
var box = id("all");
//获取最外层div
var inner = box.children[0];
//获取img的宽度
var imgWidth = inner.offsetWidth;
//获取ul
var ul = inner.children[0];
//获取ul中所有的li
var li = ul.children;
//获取焦点
var btn = id("btn");
//获取ol
var ol = inner.children[1];
for(var i=0;i<li.length;i++){
    var olli = document.createElement("li");
    ol.appendChild(olli);
    olli.innerHTML = (i+1);
    //在ol的li中添加自定义属性，添加索引值
    olli.setAttribute("index",i);
    //鼠标点击事件
    olli.onclick = function() {
        //先去掉所有的颜色
        for(var j=0;j<ol.children.length;j++){
            ol.children[j].removeAttribute("class");
        }
        //设置鼠标点击进来的样式
        this.className="current";
        //获取ol中li的索引值
        index = this.getAttribute("index");
        ul.style.left = -index*imgWidth+'px';
    }
}
//设置第一个ol中li的背景颜色
ol.children[0].className = "current";
//无缝轮播 复制第一张图片
ul.appendChild(ul.children[0].cloneNode(true));
// 自动轮播
var timeId=setInterval(clickHandle,3000);
//点击左侧
id("left").onclick = function() {
    if(index == 0){
        index = li.length-1;
        ul.style.left = -index*imgWidth+'px';
    }
    index--;
    ul.style.left = -index*imgWidth + 'px';
    for(var i=0;i<ol.children.length;i++){
        ol.children[i].className="";
    }
    ol.children[index].className="current";
}
// 点击右侧
id("right").onclick = clickHandle;
function clickHandle(){
    if(index == ul.children.length-1){
        ul.style.left = 0 + "px";
        index = 0;
    }
    index++;
    ul.style.left = -index*imgWidth + 'px';
    if(index ==li.length-1){
        ol.children[0].className="current";
        ol.children[ol.children.length-1].className = "";
    }else{
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className="";
        }
        ol.children[index].className="current";
    }
}
//鼠标移入轮播图
id("all").onmouseover = function (){
    clearInterval(timeId);
    btn.style.display = "block";
}
//鼠标移出轮播图
id("all").onmouseout = function (){
    btn.style.display = "none";
    timeId = setInterval(clickHandle,3000);
}
// 获取id
function id(id){
    return document.getElementById(id);
}

以上就是轮播图代码部分。