轮播图

我不是女神ヾ 2022-05-13 08:20 332阅读 0赞

# 方法1 #

不太完善

html+js代码如下

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="css/test3.css">
        <title>轮播图</title>
    </head>
    
    <body>
        <div class="content">
            <div class="list" style="left:-600px;">
                <img src="./image/1.jpg" alt="">
                <img src="./image/2.jpg" alt="">
                <img src="./image/3.jpg" alt="">
                <img src="./image/4.jpg" alt="">
                <img src="./image/5.jpg" alt="">
            </div>
            <ul class="number">
                <li index="1" class="first dot">1</li>
                <li index="2" class="dot">2</li>
                <li index="3" class="dot">3</li>
                <li index="4" class="dot">4</li>
                <li index="5" class="dot">5</li>
            </ul>
            <div class="pre">&lAarr;</div>
            <div class="next">&rAarr;</div>
        </div>
    </body>
    <script type="text/javascript">
        var index = 1, timer;
        function init() {
            eventBind();
            autoPlay();
        }
        init();
        function autoPlay() {
            timer = setInterval(function () {
                animation(-600);
                dotIndex(true);
            }, 1000)
        }
        function stopAutoPlay() {
            clearInterval(timer);
        }
        function dotIndex(add) {
            if (add) {
                index++;
            }
            else {
                index--;
            }
            if (index > 5) {
                index = 1;
            }
            if (index < 1) {
                index = 5;
            }
            dotActive();
        }
        function dotActive() {
            var dots = document.getElementsByClassName("dot");
            var len = dots.length;
            for (var i = 0; i < len; i++) {
                dots[i].className = "dot";
            }
    
            for (var i = 0; i < len; i++) {
                /*此处可以不用parseInt，当不用全等时*/
                if (index === parseInt(dots[i].getAttribute("index"))) {
                    dots[i].className = "dot first";
                }
            }
        }
        function eventBind() {
            /*点的点击事件*/
            var dots = document.getElementsByClassName("dot");
            var len = dots.length;
            for (var i = 0; i < len; i++) {
                (function (j) {
                    dots[j].onclick = function (e) {
                        var ind = parseInt(dots[j].getAttribute("index"));
                        animation((index - ind) * (-600));/*显示点击的图片*/
                        index = ind;
                        dotActive();
                    }
                })(i)
            }
            /*容器的hover事件*/
            var con = document.getElementsByClassName("content")[0];
            /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
            con.onmouseover = function (e) {
                stopAutoPlay();
            }
            con.onmouseout = function (e) {
                autoPlay();
            }
            /*箭头事件的绑定*/
            var pre = document.getElementsByClassName("pre")[0];
            var next = document.getElementsByClassName("next")[0];
            pre.onclick = function (e) {
                dotIndex(false);
                animation(600);
            }
            next.onclick = function (e) {
                dotIndex(true);
                animation(-600);
            }
        }
        function animation(offset) {
            var lists = document.getElementsByClassName("list")[0];
            var left = parseInt(lists.style.left.slice(0, lists.style.left.indexOf("p"))) + offset;
            if (left < -3000) {
                lists.style.left = "-600px";
            }
            else if (left > -600) {
                lists.style.left = "-3000px";
            }
            else {
                lists.style.left = left + "px";
            }
        }
    </script>
    
    </html>

css代码

*{
        margin: 0;
        padding: 0;
    }
    .content{
        margin: auto;
        height: 540px;
        width: 600px;
        overflow: hidden;
        position: relative;
        box-shadow: 1px rgb(223, 223, 119);
        border: 1px solid rgb(104, 104, 91);
    }
    /* 图片 */
    .list{
        width: 4200px;
        height: 400px;
        position: absolute;
        top: 0;
        /* overflow: hidden; */
    }
    img{
        float: left;
        width: 600px;
        height: 400px;
    }
    /* 数字 */
    .number{
        position: absolute;
        left: 40%;
        bottom: 30px;
        list-style: none;
    }
    .number li{
        float: left;
        width: 15px;
        height: 15px;
        background: rgb(50, 158, 190);
        margin-left: 8px;
        /* border-radius: 50%; */
    }
    .number .first{
        background: white;
    }
    .pre,.next{
        position: absolute;
        top:40%;
        height: 40px;
        width: 40px;
        font-size: 40px;
        color: white;
        text-align: center;
        background: red;
    }
    .pre{
        left: 30px;
    }
    .next{
        right: 30px;
    }

# 方法2 #

html+js代码如下

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="css/style.css">
        <title>轮播图</title>
    </head>
    
    <body>
        <div class="box">
            <div class="list" id="list">
                <img src="./image/1.jpg" alt="">
                <img src="./image/2.jpg" alt="">
                <img src="./image/3.jpg" alt="">
                <img src="./image/4.jpg" alt="">
                <img src="./image/5.jpg" alt="">
            </div>
            <div class="num">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function () {
            // 获取图像
            var lists = document.querySelector(".list").children;
            var lis = document.querySelector("ul").children;
            // 记录当前选中对象
            var selection;
            for (var i = 0; i < lists.length; i++) {
                // 找到元素
                var img = lists[i];
                var li = lis[i];
                // 赋值
                li.index=i;
                // 鼠标移入事件
                li.onmouseover = function () {
                    // 获取对应图片的下标
                    var tmp=lists[this.index];
                    // 将已选择的恢复
                    lists[selection].style.visibility="hidden";
                    lis[selection].style.backgroundColor="red";
                    // 将现选择的显示
                    tmp.style.visibility="visible";
                    this.style.backgroundColor = "blue";
                    clearInterval(timer);
                    selection=this.index;
                }
                li.onmouseout=function(){
                    timer = setInterval(scrollDisplay, 2000);
                }
                if (i == 0) {
                    img.style.visibility = "visible";
                    li.style.backgroundColor = "blue";
                    selection = i;
                } else {
                    // 隐藏
                    img.style.visibility = "hidden";
                    li.style.backgroundColor = "red";
                }
            }
            // 启动定时器
            var timer = setInterval(scrollDisplay, 2000);
    
            function scrollDisplay() {
                // 显示下一个
                // 判断是不是最后一个
                if (selection == lists.length - 1) {
                    // 上个隐藏
                    var tmp = lists[selection];
                    var tmp1 = lis[selection];
                    tmp.style.visibility = "hidden";
                    tmp1.style.backgroundColor = "red";
                    // 从零开始
                    selection = 0;
                } else {
                    // 上一个隐藏
                    var tmp = lists[selection];
                    var tmp1 = lis[selection];
                    tmp.style.visibility = "hidden";
                    tmp1.style.backgroundColor = "red";
                    selection++;
                }
                // 显示当前
                var tmp = lists[selection];
                var tmp1 = lis[selection];
                tmp.style.visibility = "visible";
                tmp1.style.backgroundColor = "blue";
            }
            
        }
    
    </script>
    
    </html>

css代码

*{
        margin: 0;
        padding: 0;
    }
    body{
        display: block;
    }
    /* 外框 */
    .box{
        width: 500px;
        height: 700px;
        margin: auto;
    }
    /* 图片 */
    .list{
        border: 1px solid #84c50a;
        width: 100%;
        height: 500px;
        position: relative;
        left: 0;
        right: 0;
    }
    img{
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        visibility: hidden;
    }
    .num{
        width: 250px;
        height: 30px;
        position: relative;
        top:30px;
        left: 130px;
    }
    ul{
       
        list-style: none;
    }
    li{
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 30px;
        background: #c50a13;
    }