master

分支 (1)

管理

管理

master

lunbotu
/
4-轮播图.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(119, 115, 110);
        }
        ul {
            width: 800px;
            height: 200px;
            padding:0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            list-style: none;
        }
        ul:hover {
            cursor: pointer;
        }
        li {
            position: absolute;
            left: 0;
            transition:0.4s;
        }
    </style>
    <script>
        window.onload = function () {
            //1.获取ul
            var cur_ul = document.getElementById('banner');
            // 2.创建数组实例
            var arr = new Array();
            // 3.声明一个定时器
            var timer = setInterval(get_next,1500 )
            for (i = 1; i <= 5; i++) {
                // 创建li img
                var cur_li = document.createElement('li');
                var cur_img = document.createElement('img');
                cur_img.src = './img/' + i + '.jpg';
                cur_img.style.width = '400px';
                cur_img.style.height = '200px';
                cur_li.appendChild(cur_img);
                cur_ul.appendChild(cur_li);
                // 鼠标移进来停止轮播
                cur_ul.onmouseenter=function(){
                    clearInterval(timer)
                }
                // 鼠标移出去继续轮播
                cur_ul.onmouseleave=function(){
                    timer=setInterval(get_next,1000)
                }
                arr.push(cur_li);
            }
            var len = arr.length - 1;
            arr[len - 2].style.left = '0px';
            arr[len - 1].style.left = '200px';
            arr[len].style.left = '400px';
            arr[len - 1].style.transform = 'scale(1.3)';
            arr[len - 1].style.zIndex = 100;
            // 封装轮播函数
            function get_next(){
                var give_up = arr[arr.length - 1];
                arr.pop();//把最后一张图片取出来
                arr.unshift(give_up);//把最后一张图片放在第一张
                for (var i = 0; i < arr.length; i++) {
                    arr[i].style.zIndex = i;
                    arr[i].style.transform = 'scale(1)';

                }
                arr[len - 2].style.left = '0px';
                arr[len - 1].style.left = '200px';
                arr[len].style.left = '400px';
                arr[len - 1].style.transform = 'scale(1.3)';
                arr[len - 1].style.zIndex = 100;
            }
            // 封装左箭头
            function get_pre(){
                var give_up = arr[0];
                arr.shift();//把第一张图片取出来
                arr.push(give_up);//放到最后一张
                for (var i = 0; i < arr.length; i++) {
                    arr[i].style.zIndex = i;
                    arr[i].style.transform = 'scale(1)';

                }
                arr[len - 2].style.left = '0px';
                arr[len - 1].style.left = '200px';
                arr[len].style.left = '400px';
                arr[len - 1].style.transform = 'scale(1.3)';
                arr[len - 1].style.zIndex = 100;
            }
            // 创建左箭头
            var pre_img=document.createElement('img');
            pre_img.src='img/preImg.png';
            pre_img.style.position='absolute';
            pre_img.style.top=0;
            pre_img.style.bottom=0;
            pre_img.style.left=0;
            pre_img.style.margin='auto';
            pre_img.style.zIndex=100;
            cur_ul.appendChild(pre_img);
            // 创建右箭头
            var nex_img=document.createElement('img');
            nex_img.src='img/nexImg.png';
            nex_img.style.position='absolute';
            nex_img.style.top=0;
            nex_img.style.bottom=0;
            nex_img.style.right=0;
            nex_img.style.margin='auto';
            nex_img.style.zIndex=100;
            cur_ul.appendChild(nex_img);
         // 给左右箭头绑定事件
        pre_img.onclick=function(){
            get_pre()
        }
        nex_img.onclick=function(){
            get_next()
        }
        }
    </script>
</head>
<body>
    <ul id="banner"></ul>
</body>
</html>