• 使用原生的javascript来实现轮播图


    <!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: yellow;
            }
    
            #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="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>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
    <script>
        function $(element) {
            return document.getElementById(element);
        }
        var box = $("box");
        var screen = box.children[0];
        var ul = screen.children[0];
        var ulLis = ul.children;
        var ol = screen.children[1];
        var arr = $("arr");
        var left = $("left");
        var right = $("right");
        //动态创建小图标
        for (var i = 0; i < ulLis.length; i++) {
            var li = document.createElement("li");
            li.innerHTML = i + 1;
            ol.appendChild(li);
        }
        //设置这些个小图标
        var olLis = ol.children;
        var imgWidth = screen.offsetWidth;
        for (var j = 0; j < olLis.length; j++) {
            olLis[j].index = j;
            olLis[j].onmouseover = function () {
                //排他思想
                for (var i = 0; i < olLis.length; i++) {
                    olLis[i].className = "";
                }
                this.className = "current";
                var target = -imgWidth * this.index;
                cutton(ul, target, 20);
                //为了让点击事件和小面的小图标能够一一对应,设置他们的索引值相同
                pic = square = this.index;
            }
        }
        //给小图标设置一个初始样式
        ol.children[0].className = "current";
        //给ul追加一张图
        ul.appendChild(ul.children[0].cloneNode(true));
        //设置箭头的显示与隐藏
        box.onmouseover = function () {
            arr.style.display = "block";
            //鼠标放上去的时候,不再自动滚动
            clearInterval(timer);
        }
        box.onmouseout = function () {
            arr.style.display = "none";
            //鼠标离开的时候,继续自动滚动
            timer = setInterval(playNext, 1000);
        }
        //设置点击左右小箭头的事件且要求小图标要跟着变化
        //1.设置点击右侧箭头
        var pic = 0;//记录当前为第几项用
        var square = 0;//记录小图标的索引值
        /* right.onclick = function () {//存在的问题是当移动到最后一张的时候,无法跳转到第一张
         pic++;
         var target = -pic * imgWidth;
         cutton(ul, target, 20);
         }*/
        //方法改进
        /*right.onclick = function () {
         //先对pic做一个判断,当pic的值为5的时候,实现一个跳转
         if (pic == ulLis.length - 1) {
         ul.style.left = 0;
         pic = 0;
         }
         pic++;
         var target = -pic * imgWidth;
         cutton(ul, target, 20);
         if (square == olLis.length - 1) {
         square = -1;//下面会加一,就变成了0
         }
         square++;
         //排他思想
         for (var i = 0; i < olLis.length; i++) {
         olLis[i].className = "";
         }
         olLis[square].className = "current";
         }*/
        //使用封装函数
        right.onclick = function () {
            playNext();
        }
        //2.设置点击左侧箭头
        left.onclick = function () {//要判断一下当pic为零时的情况
            if (pic == 0) {
                ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要记得加单位
                pic = ulLis.length - 1;//给pic重新赋一个值
            }
            pic--;
            var target = -pic * imgWidth;
            cutton(ul, target, 20);
            //设置小图标样式
            if (square == 0) {
                square = olLis.length;
            }
            square--;
            for (var i = 0; i < olLis.length; i++) {
                olLis[i].className = "";
            }
            olLis[square].className = "current";
        }
        //设置自动滚动
        //1.封装点击右侧小箭头事件
        function playNext() {
            //先对pic做一个判断,当pic的值为5的时候,实现一个跳转
            if (pic == ulLis.length - 1) {
                ul.style.left = 0;
                pic = 0;
            }
            pic++;
            var target = -pic * imgWidth;
            cutton(ul, target, 20);
            if (square == olLis.length - 1) {
                square = -1;//下面会加一,就变成了0
            }
            square++;
            //排他思想
            for (var i = 0; i < olLis.length; i++) {
                olLis[i].className = "";
            }
            olLis[square].className = "current";
        }
        //2.调用这个封装的函数,并且设置一个间歇性计时器
        var timer = null;
        timer = setInterval(playNext, 1000);
        //封装函数
        function cutton(obj, target, stp) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = stp;
                step = obj.offsetLeft > target ? -step : step;
                if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) {
                    obj.style.left = obj.offsetLeft + step + "px";
                } else {
                    obj.style.left = target + "px";
                    clearInterval(obj.timer);
                }
            }, 15)
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    python kivy 简单入门
    django 入门实例
    window docker安装
    apache进程和用户请求的关系
    php cookie工作原理
    react-router 简单的nginx配置
    node单线程支撑高并发原理(node异步I/O)
    知识图谱
    java
    java
  • 原文地址:https://www.cnblogs.com/199316xu/p/6435454.html
Copyright © 2020-2023  润新知