js手写轮播图

最新推荐文章于 2023-04-10 08:48:30 发布

口袋の的天空

最新推荐文章于 2023-04-10 08:48:30 发布

阅读量129

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39928481/article/details/115005330

版权

js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

js手写轮播图

1.准备4张1920*1080的图片

2.写html和样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
      * {
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }
        .container {
            position: relative;
            width: 960px;
            height: 540px;
            margin:100px auto 0 auto;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        }   
        .wrap {
            position: absolute;
            height: 540px;
            z-index: 1;
        }
        .container .wrap img {
            float: left;
            width: 960px;
            height: 540px;
        }
        .container .buttons {
            position: absolute;
            right: 350px;
            bottom:20px;
            width: 200px;
            height: 10px;
            z-index: 2;
        }
        .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: green;
            text-align: center;
            color:white;
            cursor: pointer;
        }
        .container .buttons span.on{
            background-color: red;
        }
        .container .arrow {
            position: absolute;
            top: 35%;
            color: green;
            padding:0px 14px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
            display: none;
        }
        .container .arrow_left {
            left: 10px;
        }
        .container .arrow_right {
            right: 10px;
        }
        .container:hover .arrow {
            display: block;
        }
        .container .arrow:hover {
            background-color: rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrap" style="left:-960px;">
            <img src="./img/d.jpg" alt="">
            <img src="./img/a.jpeg" alt="">
            <img src="./img/b.jpeg" alt="">
            <img src="./img/c.jpeg" alt="">
            <img src="./img/d.jpg" alt="">
            <img src="./img/a.jpeg" alt="">

        </div>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a>
    </div>
    
</body>
</html>

效果：

3.js部分

<script>
        // 获取dom
        var wrap = document.querySelector(".wrap");
        var next = document.querySelector(".arrow_right");
        var prev = document.querySelector(".arrow_left");
    //   根据index的变化给小圆点添加样式的方法
        var index = 0;
        var dots = document.getElementsByTagName("span");
        // 下面小圆点按钮
        for (var i = 0, len = dots.length; i < len; i++){
            (function(i){
                dots[i].onclick = function () {
                    // i是当前点击的,index是点所在位置
                    var dis = index - i;
                    index = i;
                    showCurrentDot();
                }
            })(i);            
        }
        // 小圆点样式的变化
        function showCurrentDot () {
            for(var i = 0, len = dots.length; i < len; i++){
                dots[i].className = "";
            }
            dots[index].className = "on";
        }
        
      
        // 点击左边的上一页按钮
        next.onclick = function () {
            next_pic();
        }
        function next_pic () {
            var newLeft;
            if(wrap.style.left === "-4800px"){
                newLeft = 0;
            }else{
                newLeft = parseInt(wrap.style.left)-960;
            }
            wrap.style.left = newLeft + "px";
            console.log(wrap.style.left)
            index++;
            if(index > 4){
                index = 0;
            }
            showCurrentDot()
        }
      // 点击下一页按钮
        prev.onclick = function () {
            prev_pic();
        }
        function prev_pic () {
            var newLeft;
            if(wrap.style.left === "0px"){
                newLeft = -4800;
            }else{
                newLeft = parseInt(wrap.style.left)+960;
            }
            wrap.style.left = newLeft + "px";
            console.log(wrap.style.left)

            index--;
            if(index < 0){
                index = 4;
            }
            showCurrentDot();
        }
        // 自动轮播
        var timer = null;
        function autoPlay () {
            timer = setInterval(function () {
                next_pic();
            },1000);
        }
        autoPlay();
        // 鼠标悬停禁止轮播
        var container = document.querySelector(".container");
        container.onmouseenter = function () {
            clearInterval(timer);
        }
        container.onmouseleave = function () {
            // autoPlay();    
        }
        
    </script>