js 原生JS实现轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>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"><!--相框-->

        <ul>

            <li><img src="data:images/1.jpg" width="500" height="200"/></li>

            <li><img src="data:images/2.jpg" width="500" height="200"/></li>

            <li><img src="data:images/3.jpg" width="500" height="200"/></li>

            <li><img src="data:images/4.jpg" width="500" height="200"/></li>

            <li><img src="data:images/5.jpg" width="500" height="200"/></li>

        </ul>

        <ol>

        </ol>

    </div>

    <div id="arr">

        <span id="left">

            &lt;

        </span>

        <span id="right">

            &gt;

        </span>

    </div>

</div>

<script src="common.js"></script>

<script>

    var box = my$('box');

    //最外层div

    var screen = box.children[0];

    //相框

    var screenWidth = screen.offsetWidth;

    //相框的宽度

    var ulobj = screen.children[0];

    //整个ul

    var list = ulobj.children;

    //ul里面的每个li

    var olobj = screen.children[1];

    //ol

    var arr = my$('arr');

    //获取左右按键

    //设置一个全局变量为了后面可以使用

    var index = 0;

    //根据ui里的li的个数 循环添加ol里面的小按钮

    for (var i = 0; i < list.length; i++) {

        //创建一个li

        var liobj = document.createElement('li');

        //追加到ol里面

        olobj.appendChild(liobj);

        //设置li的内容

        liobj.innerHTML = (i + 1);

        //为每个li添加自定义属性 保存其索引值

        liobj.setAttribute("index", i);

        //为每个li注册鼠标进入事件

        liobj.onmouseover = function () {

            //排他功能

            for (var j = 0; j < olobj.children.length; j++) {

                //移除全部li的样式

                olobj.children[j].removeAttribute('class');

            }

            //设置当前的li的样式

            this.className = 'current';

            //获取当前li的索引值

            index = this.getAttribute("index");

            //调用动画函数 传入要移动的ul 和 位置（移动的是负数）

            animate(ulobj, -index * screenWidth);

        };

    }

    //设置ol中第一个li有背景颜色

    olobj.children[0].className = "current";

    //克隆一个第一个li到最后cloneNode() 方法克隆所有属性以及它们的值。

    // 如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

    ulobj.appendChild(list[0].cloneNode(true));

    //自动播放

    var timeId = setInterval(clickHandle, 1000);

    //鼠标进入

    box.onmouseover = function () {

        //显示两边的按钮

        arr.style.display = 'block';

        //鼠标进入时候就清理定时器

        clearInterval(timeId);

    }

    //鼠标离开

    box.onmouseout = function () {

        //隐藏两边的按钮

        arr.style.display = 'none';

        //鼠标离开时重新设置定时器（自动播放 其他就是右键的点击事件）

        timeId = setInterval(clickHandle, 1000);

    }

    //为右键注册点击事件

    my$('right').onclick = clickHandle

    //右键事件函数

    function clickHandle() {

        //先判断当前的索引值是否等于5 那就说明已经看到最后一张（也是第一张）那么立刻将索引重置为第一张 且将当前的最后一张切换到第一张

        if (index == list.length - 1) {

            index = 0;

            ulobj.style.left = 0 + "px";

        }

        //索引加1

        index++;

        //移动图片

        animate(ulobj, -index * screenWidth);

        //判断索引是不是第五个 如果是就说明是最后一张也是第一张 把最后一个索引的样式取消 设置第一个的样式

        if (index == list.length - 1) {

            olobj.children[olobj.children.length - 1].className = "";

            olobj.children[0].className = 'current';

        } else {

            //索引不是最后一个就正常按照索引值设置样式

            for (var j = 0; j < olobj.children.length; j++) {

                olobj.children[j].removeAttribute('class');

            }

            olobj.children[index].className = 'current';

        }

    }

    //为左键注册事件

    my$("left").onclick = function () {

        //判断是不是第一张图 如果是就立刻把索引改完最后一张的索引（最后一张与第一张一样）切换成最后一张

        if (index == 0) {

            index = 5;

            ulobj.style.left = -index * screenWidth + "px";

        }

        index--;

        animate(ulobj, -index * screenWidth);

        //正常设置样式

        for (var j = 0; j < olobj.children.length; j++) {

            olobj.children[j].removeAttribute('class');

        }

        //设置当前索引对于的样式

        olobj.children[index].className = 'current';

    }

    //设置任意的一个元素,移动到指定的目标位置

    function animate(element, target) {

        clearInterval(element.timeId);

        //定时器的id值存储到对象的一个属性中

        element.timeId = setInterval(function () {

            //获取元素的当前的位置,数字类型

            var current = element.offsetLeft;

            //每次移动的距离

            var step = 10;

            step = current < target ? step : -step;

            //当前移动到位置

            current += step;

            if (Math.abs(current - target) > Math.abs(step)) {

                element.style.left = current + "px";

            } else {

                //清理定时器

                clearInterval(element.timeId);

                //直接到达目标

                element.style.left = target + "px";

            }

        }, 5);

    }

</script>

</body>

</html>
巴特西

js 原生JS实现轮播图

最新文章

热门文章
