1. 技术文章
  2. js原生实现轮播图

js原生实现轮播图

由 半城伤御伤魂 提交于 2019-12-02 06:24:11

效果图:
在这里插入图片描述

轮播样式及左边二级导航栏样式和HTML代码

* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
}

body {
    font-family: "微软雅黑";
    color: #14191e;
}

.all {
    width: 800px;
    height: 500px;
    float: left;
    position: relative;
}

.screen {
    width: 800px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.screen li {
    width: 800px;
    height: 500px;
    overflow: hidden;
    float: left;
}

.screen ul {
    position: absolute;
    left: 0;
    top: 0px;
    width: 4800px;
}

.all ol {
    position: absolute;
    right: 10px;
    bottom: 10px;
    line-height: 20px;
    text-align: center;
}

.all ol li {
    float: left;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #ccc;
    margin-left: 10px;
    cursor: pointer;
}

.all ol li.current {
    background: #DB192A;
}

#arr {
    display: none;
}

#arr span {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -20px;
    background: #000;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: '黑体';
    font-size: 30px;
    color: #fff;
    opacity: 0.3;
    border: 1px solid #fff;
    z-index: 99999;
}

#arr #right {
    right: 5px;
    left: auto;
    z-index: 99999;
}
/*左边二级导航栏css*/
.left {
            width: 80px;
            height: 500px;
            background-color: #ccc;
            float: left;
        }
        
        .main {
            width: 900px;
            height: 500px;
            margin: 50px auto;
            position: relative;
        }
        
        .left>div.one {
            width: 80px;
            height: 500px;
        }
        
        .left>div.one>li {
            width: 80px;
            background-color: #ccc;
            height: 80px;
            line-height: 80px;
            text-align: center;
            box-sizing: border-box;
            border-bottom: 1px solid wheat;
        }
        
        .left>div.two {
            position: absolute;
            left: 80px;
            height: 500px;
            width: 400px;
            top: 0;
            z-index: 999;
            display: none;
        }
        
        .left>div.two>ul {
            height: 500px;
            width: 400px;
            background-color: rgba(255, 255, 255, 0.3);
        }
        
        .sub-inner-box {
            width: 360px;
            margin-left: 40px;
            overflow: hidden;
        }
        
        .title {
            color: #f01414;
            font-size: 16px;
            line-height: 16px;
            margin-top: 28px;
            font-weight: bold;
            margin-bottom: 30px;
        }
        
        .sub-row {
            margin-bottom: 25px;
        }
   <!-- HTML文件 -->
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    </style>
</head>

<body>
    <div class="main">
        <div class="left">
            <div class="one">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </div>
            <div class="two">
                <ul></ul>
                <ul></ul>
                <ul></ul>
                <ul></ul>
            </div>
        </div>
        <div class="all" id='box'>
            <div class="screen">
                <!--相框-->
                <ul>
                    <li><img src="images/1.jpg" width="800" height="500" /></li>
                    <li><img src="images/2.jpg" width="800" height="500" /></li>
                    <li><img src="images/3.jpg" width="800" height="500" /></li>
                    <li><img src="images/4.jpg" width="800" height="500" /></li>
                    <li><img src="images/5.jpg" width="800" height="500" /></li>
                </ul>
                <ol>
                </ol>
            </div>
            <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
        </div>

    </div>
    <script src="common.js"></script>
    <script src="leftTab.js"></script>
</body>

</html>

common.js文件

//根据id获取元素对象
function my$(id) {
    return document.getElementById(id);
}
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的所有的li
var list = ulObj.children;
console.log(list);
//获取ol
var olObj = screen.children[1];
console.log(olObj)
    //获取mian
var mainObj = document.getElementsByClassName("main")[0];
//焦点的div
var arr = my$("arr");
var pic = 0; //全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
    //创建li标签,加入到ol中
    var liObj = document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML = (i + 1);
    //在每个ol中的li标签上添加一个自定义属性,存储索引值
    liObj.setAttribute("index", i);
    //注册鼠标进入事件
    liObj.onmouseover = function() {
        //先干掉所有的ol中的li的背景颜色
        for (var j = 0; j < olObj.children.length; j++) {
            olObj.children[j].removeAttribute("class");
        }
        //设置当前鼠标进来的li的背景颜色
        this.className = "current";
        //获取鼠标进入的li的当前索引值
        pic = this.getAttribute("index");
        //移动ul
        setTimeout(() => {
            ulObj.style.left = -(pic * imgWidth) + "px";
        }, 400)
    };
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId = setInterval(clickHandle, 5000);

//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function() {
    arr.style.display = "block";
    //鼠标进入废掉之前的定时器
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function() {
    arr.style.display = "none";
};
//
mainObj.onmouseout = function() {
    timeId = setInterval(clickHandle, 3000);
};
mainObj.onmouseover = function() {
    //鼠标进入废掉之前的定时器
    clearInterval(timeId);
};
//右边按钮
let falg = true;
my$("right").onclick = function() {
    if (falg) {
        falg = false;
        clickHandle();
    }
}

function clickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
        //如何从第6个图,跳转到第一个图
        pic = 0; //先设置pic=0
        ulObj.style.left = 0 + "px"; //把ul的位置还原成开始的默认位置
    }
    pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了
    animates(ulObj, -pic * imgWidth); //pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
        //第五个按钮颜色干掉
        olObj.children[list.length - 2].className = "";
        //第一个按钮颜色设置上
        olObj.children[0].className = "current";
    } else {
        //干掉所有的小按钮的背景颜色
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        olObj.children[pic].className = "current";
    }
    /* pic++;
    if (pic == 5) {
        pic = 0;
        ulObj.style.left = 0 + "px";
    }
    animates(ulObj, -pic * imgWidth);
    for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
    }
    olObj.children[pic].className = "current"; */ //测试
};
//左边按钮
my$("left").onclick = function() {
    if (falg) {
        falg = false;
        if (pic == 0) {
            pic = 5;
            ulObj.style.left = -pic * imgWidth + "px";
        }
        pic--;
        animates(ulObj, -pic * imgWidth);
        //设置小按钮的颜色---所有的小按钮干掉颜色
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        //当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
    }
};

function animates(element, target) {
    //每次调用这个函数的时候先清理之前的计时器
    clearInterval(element.setId);
    element.setId = setInterval(function() {
        //获取元素当前的位置
        var current = element.offsetLeft;
        //每次移动的像素
        var step = (target - current) / 10;
        //判断移动的步数应该是正数还是负数
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //当前的位置=之前的当前位置+移动的步数
        current = current + step;
        current += step;
        element.style.left = current + "px";
        if (current == target) {
            clearInterval(element.setId);
            falg = true;
        }
    }, 10)
}
/* //获取元素的当前位置,移动,每次移动多少像素
function animate(element, target) {
    //每次调用这个函数的时候先清理之前的计时器
    clearInterval(element.setId);
    element.setId = setInterval(function() {
        //获取元素当前的位置
        var current = element.offsetLeft;
        //每次移动的像素
        var step = 15;
        //判断移动的步数应该是正数还是负数
        step = current < target ? step : -step;
        //当前的位置=之前的当前位置+移动的步数
        current = current + step;
        if (Math.abs(target - current) < Math.abs(step)) {
            //把计时器清理
            clearInterval(element.setId);
            element.style.left = target + "px";
            falg = true;
        } else {
            //赋值给要移动的元素
            element.style.left = current + "px";
        }
    }, 5);
} */

leftTab.js

var ulObject = document.querySelectorAll(".two>ul");
var liObject = document.querySelectorAll(".one>li");
var divTwo = document.querySelector(".two");
for (let i = 0; i < liObject.length; i++) {
    liObject[i].onmouseover = function() {
        for (let i = 0; i < liObject.length; i++) {
            liObject[i].style.backgroundColor = "#ccc";
            ulObject[i].style.display = "none";
            divTwo.style.display = "none";
        }
        ulObject[i].style.display = "block";
        divTwo.style.display = "block";
        this.style.backgroundColor = "#eceaea";
    }
    liObject[i].onmouseout = function() {
        ulObject[i].style.display = "none";
        divTwo.style.display = "none";
    }
}

for (let i = 0; i < liObject.length; i++) {
    ulObject[i].onmouseover = function() {
        this.style.display = "block";
        divTwo.style.display = "block";
    }
    ulObject[i].onmouseout = function() {
        this.style.display = "none";
        divTwo.style.display = "none";
    }
}



var arr1 = ["手机、配件", "电脑", "配件", "家电"]
liObject.forEach(function(ele, i) {
    ele.innerHTML = `${arr1[i]}`;
})
ulObject.forEach(function(ele, i) {
    ele.innerHTML = `<div class="sub-inner-box">
                        <div class="title">${arr1[i]}</div>
                        <div class="sub-row">
                            <span class="bold mr10">手机通讯：</span>
                            <a href="">手机</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">手机维修</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">以旧换新</a>
                        </div>
                        <div class="sub-row">
                            <span class="bold mr10">手机配件：</span>
                            <a href="">手机壳</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">手机存储卡</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">数据线</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">充电器</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">电池</a>
                        </div>
                        <div class="sub-row">
                            <span class="bold mr10">运营商：</span>
                            <a href="">中国联通</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">中国移动</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">中国电信</a>
                        </div>
                        <div class="sub-row">
                            <span class="bold mr10">智能设备：</span>
                            <a href="">智能手环</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">智能家居</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">智能手表</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">其他配件</a>
                        </div>
                        <div class="sub-row">
                            <span class="bold mr10">娱乐：</span>
                            <a href="">耳机</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">音响</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">收音机</a>
                            <span class="ml10 mr10">/</span>
                            <a href="">麦克风</a>
                        </div>
                    </div>`
})

实现自我感觉有点麻烦,不懂的可以评论回复！！！！！！！！

标签
pic
js代码
轮播
运营商
js
ul
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!