JS实现无缝轮播完整代码

最新推荐文章于 2024-06-25 09:45:22 发布

关注我不迷路

最新推荐文章于 2024-06-25 09:45:22 发布

阅读量646

点赞数 1

文章标签： js js轮播图

本文链接：https://blog.csdn.net/weixin_44264878/article/details/90524297

版权

功能：

创建底部小圆点，根据圆点切换图片
自动轮播
鼠标移入移出显示隐藏左右按钮
点击左右按钮切换图片

HTML



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

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

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

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

        .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;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div class="all" id='box'>
    <div class="screen" id="scrren"><!--相框-->
        <ul id="uu">
            <li>
                <img src="images/1.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/2.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/3.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/4.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/5.jpg" width="500" height="200"/>
            </li>
        </ul>
        <ol id="oo">
        </ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
    var scrren = my$("scrren");//相框
    var imgWidth = scrren.offsetWidth;//相框的宽度
    var ulObj = my$("uu");//ul
    var list = my$("uu").getElementsByTagName("li");//所有的li的节点
    var olObj = my$("oo");//ol
    var btnBox = my$("arr");//左右两边按钮的盒子

    //1.创建小按钮。 根据小按钮, 切换对应的图片
    for(var i = 0 ; i < list.length; i++){
        var liObj = document.createElement("li");
        olObj.appendChild(liObj);
        liObj.innerHTML = i + 1;
        liObj.setAttribute("index", i);
        //注册鼠标移入事件
        liObj.onmouseover = function () {
            //先干掉所有的li的背景颜色
            for(var j = 0 ; j < olObj.children.length ; j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className = "current";
            //获取对应的索引
            var picIndex = this.getAttribute("index");
            //移动ul
            animate(ulObj, -picIndex * imgWidth);
        }
    }
    //设置ol中第一个li默认有背景颜色
    olObj.firstElementChild.className = "current";

    //2.自动播放
    //克隆一个ul的第一个图片, 添加到最后面去
    ulObj.appendChild(ulObj.children[0].cloneNode(true));

    var timerId = setInterval(move, 1000);
    var index = 0;
    function move() {
        if(index >= list.length - 1){
            //直接跳转到第一个图片
            index = 0;
            ulObj.style.left = "0px";
        }
        index++;
        animate(ulObj, -index * imgWidth);
        //判断小圆点
        if(index == list.length -1){
            //console.log(index);
            //把最后一个按钮颜色干掉
            olObj.children[olObj.children.length - 1].className = "";
            //给第一个按钮设置颜色
            olObj.children[0].className = "current";
        }else{
            //先干掉所有的li的背景颜色
            for(var j = 0 ; j < olObj.children.length ; j++){
                olObj.children[j].removeAttribute("class");
            }
            olObj.children[index].className = "current";
        }
    };
    //3.鼠标移入移出
    my$("box").onmouseover = function () {
        btnBox.style.display = "block";
        clearInterval(timerId);
    }
    my$("box").onmouseout = function () {
        btnBox.style.display = "none";
        timerId = setInterval(move, 1000);
    }
    //4.点击两边按钮
    my$("right").onclick = move;

    my$("left").onclick = function () {
        if(index == 0){
            index = list.length - 1;
            ulObj.style.left = -index * imgWidth + "px";
        }
        index--;
        animate(ulObj, -index * imgWidth);
        //先干掉所有的li的背景颜色
        for(var j = 0 ; j < olObj.children.length ; j++){
            olObj.children[j].removeAttribute("class");
        }
        olObj.children[index].className = "current";
    }

</script>
</body>
</html>

common.js

// 通过id名获取的元素
function my$(id) {
    return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
    return document.getElementsByTagName(element);
}

//设置任意的标签中的任意文本内容
function setInnerText(element, text) {
    //判断是否支持这个属性
    if(typeof element.textContent == "undefined"){
        console.log(element.textContent+"====");
        //说明不支持
        element.innerText = text;
    }else{
        console.log(element.textContent);
        element.textContent = text;
    }
}

//封装 获取任意标签中的文本内容. 需要返回值
function getInnerText(element){
    if(element.textContent == undefined){
        return element.innerText;
    }else{
        return element.textContent;
    }
}

//封装一个获取任意一个父级元素的第一个子元素
function getFirstElementChild(parentElement) {
    if(parentElement.firstElementChild){
        //隐式布尔类型转换 --->true
        //如果支持
        return parentElement.firstElementChild;
    }else{
        return parentElement.firstChild;
    }
}


/*
   * @params : 对象  事件类型  回调函数
   * 作用: 为任意元素, 绑定任意的事件, 执行任意的处理函数
   * */
function addEventListener(element, type, fn) {
    //判断是不是支持这个方法   对象.方法名同样可以判断
    if(element.addEventListener){
        element.addEventListener(type, fn, false);
    }else if(element.attachEvent){
        element.attachEvent("on" + type, fn);
    }else{
        element["on"+type] = fn;
    }
}

//封装匀速动画函数--->任意一个元素移动到指定的目标位置
//@params : 元素  目标位置
function animate(element,target ) {
    //先清理定时器,防止多次绑定
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        //1.获取div当前的位置--->看成盒子当前的left值
        var current = element.offsetLeft;//number类型
        //2.div每一次移动多少像素 = 10 即步数
        var step = 10;
        //2.1判断往哪边移动
        step = current <= target ? step : -step;
        //3.每次移动后的距离
        current += step;
        4.判断剩余的步数是否大于 step
        if(Math.abs(target - current) > Math.abs(step)){
            element.style.left = current + "px";
        }else{
            clearInterval(element.timeId);
            element.style.left = target + "px";

        }
    },5)
}

//简化 :封装获取页面向上或者是向左卷曲出去的距离值
function getScroll() {
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft,
        top: window.pageYOffset || document.documentElement.scrollTop
    };
}

//封装变速动画
//@params : 元素  目标位置
function animateBian(element, target) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        //获取当前的元素的位置
        var current = element.offsetLeft;
        //设置移动的步数
        var step = (target - current)/10;
        //判断步数 > 0, 则向上取整 ,否则向下取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        //获取每次移动后的left值
        current += step;
        element.style.left = current + "px";
        if(current == target){
            clearInterval(element.timeId);
        }
        console.log("目标位置:" + target + ",每次移动的步数" + step +",当前位置:" + current );
    },10)
}

关注我不迷路

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现无缝轮播完整代码

功能：创建底部小圆点，根据圆点切换图片自动轮播鼠标移入移出显示隐藏左右按钮点击左右按钮切换图片HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <...
复制链接

扫一扫