jq 自定义轮播图

最新推荐文章于 2023-06-05 19:20:20 发布

不忘初心1995

最新推荐文章于 2023-06-05 19:20:20 发布

阅读量94

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42451776/article/details/119041601

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章目录

- 核心代码
- - html
  - css
  - js

核心代码

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>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div class="container">
        <div class="wxj_swiper">
            <ul class="wxj_ul">
                <li>
                    <img src="img/0.jpg" alt="">
                </li>
                <li>
                    <img src="img/1.jpg" alt="">
                </li>
                <li>
                    <img src="img/5.jpg" alt="">
                </li>
            </ul>

            <!-- // 左右 -->
            <div class="directive_left">
                &lt;
            </div>
            <div class="directive_right">
                &gt;
            </div>

            <!-- 指示点 -->
            <div class="wxj_dot">
               
            </div>
        </div>
    </div>

</body>
<script src="js/index.js"></script>

</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

ul {
    list-style: none;
}

div.container {
    width: 100vw;
    height: 100vh;

    div.wxj_swiper {
        margin: 200px auto;
        width: 600px;
        height: 400px;
        overflow: hidden;
        position: relative;

        ul {
            display: flex;
            width: calc(600px * 5);
            height: 400px;
            position: absolute;
            left: -600px;
            // transition: left 0.5s linear;

            li {
                width: 600px;
                height: 400px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .directive_left{
            cursor: pointer;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0,0,0,.5);
            color: #fff;
            font-size: 30px;
            font-weight: 600;
            position: absolute;
            left: 0;
            top:50%;
            transform: translate(0,-50%);
            z-index: 999;
        }

        .directive_right{
            cursor: pointer;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0,0,0,.5);
            color: #fff;
            font-size: 30px;
            font-weight: 600;
            position: absolute;
            right: 0;
            top:50%;
            transform: translate(0,-50%);
            z-index: 999;
        }
        .wxj_dot{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            bottom:20px;
            transform: translate(-50%,0);
            z-index: 999; 
        
            .item{
                width: 15px;
                height: 15px;
                background-color: #fff;
                border-radius: 50%;
                margin-left: 10px;
                &:nth-of-type(1){
                    margin: 0;
                }
            }
            .active{
                background-color: aqua;
            }
        }
    }
}

js

$(function () {
    class swiper {
        constructor(options = { baseEle: null, hasDot: "true", hasDir: "true", autoplay: "true", durtion: 3000, time: 500, directive: "" }) {
            this.baseEle = options.baseEle
            this.autoplay = options.autoplay || "true"
            this.durtion = options.durtion || 3000
            this.hasDot = options.hasDot || "true"
            this.hasDir = options.hasDir || "true"
            this.length = 0
            this.directive = options.directive || "right"
            this.currentIndex = 1  // 当前第几项
            this.timer = null
            this.time = options.time || 500 // 滑动切换时长
            this.ul = null
            this.init()
        }

        init() {
            let isinit = this.isHasBase()
            if (!isinit) {
                console.log("请输入根节点")
                return
            }
            this.isShowDot()
            this.isShowDir()
            this.ul = $(".wxj_ul")
            this.createEle()
            this.length = $(".wxj_ul li").length
            let arr = []
            for (let i = 0; i < this.length - 2; i++) {
                let ele = `<div class="item" index=${i}></div>`
                arr.push(ele)
            }

            $(".wxj_dot").append(arr)

            this.move();
            this.autoColor()

            this.baseEle.on("mouseenter", () => {
                clearInterval(this.timer)

            })
            this.baseEle.on("mouseleave", () => {
                this.move()
            })

            $(".directive_left").on("click", () => {
                clearInterval(this.timer)
                this.pre()

            })

            $(".directive_right").on("click", () => {
                clearInterval(this.timer)
                this.next()
            })

            // dot点击事件
            $(".wxj_dot").on("click", (e) => {
                if (e.target.className.includes("item")) {
                    let index = $(e.target).attr("index") - 0
                    this.currentIndex = index + 1
                    this.autoColor()
                    let number = -this.currentIndex * 600
                    this.ul.animate({ "left": number + "px" }, this.time)
                }
            })

        }

        // 查看是否有根节点
        isHasBase() {
            if ($(this.baseEle).length!=1) {
                return false
            }
            this.baseEle = $(this.baseEle)
            return true
        }

        // 判断是否需要dot
        isShowDot() {
            console.log(this.hasDot, this.durtion);
            if (this.hasDot !== "true") {
                $(".wxj_dot").hide()
            }
        }

        // 判断是否需要dir
        isShowDir() {
            if (this.hasDir !== "true") {
                $(".directive_left").hide()
                $(".directive_right").hide()
            }
        }

        // 自动轮播
        move() {
            switch (this.directive) {
                case "left":
                    this.timer = setInterval(() => {
                        this.pre()
                    }, this.durtion)
                    break;
                case "right":

                    this.timer = setInterval(() => {
                        this.next()
                    }, this.durtion)
                    break;
                default:
                    console.log("err");
                    break;

            }

        }

        // 下一页
        next() {
            // console.log(this.currentIndex);
            if (this.currentIndex < this.length - 1) {
                this.currentIndex += 1
                let number = this.currentIndex * 600 * -1
                this.ul.animate({ "left": number + "px" }, this.time)

                if (this.currentIndex >= this.length - 1) {
                    this.currentIndex = 1
                    let number = -this.currentIndex * 600
                    this.ul.animate({
                        "left": number + "px"
                    }, 0)
                }
            }
            this.autoColor()

        }

        // 上一页
        pre() {
            // console.log(this.currentIndex);

            if (this.currentIndex <= this.length - 1) {
                this.currentIndex -= 1
                let number = -this.currentIndex * 600
                this.ul.animate({ "left": number + "px" }, this.time)

                if (this.currentIndex <= 0) {
                    this.currentIndex = this.length - 2
                    let number = -this.currentIndex * 600
                    this.ul.animate({
                        "left": number + "px"
                    }, 0)
                }
            }

            this.autoColor()
        }

        // dot自动选中
        autoColor() {
            $(".wxj_dot .item").eq(this.currentIndex - 1).addClass("active").siblings().removeClass("active")
        }

        // 创建节点
        createEle() {
            let ele1 = $(".wxj_ul li").eq(0).clone()
            let ele2 = $(".wxj_ul li").eq($(".wxj_ul li").length - 1).clone()
            $(".wxj_ul").append(ele1)
            $(".wxj_ul").prepend(ele2)
        }
    }

    new swiper({baseEle:".wxj_swiper", durtion: 5000, hasDir: "true", hasDot: "false" })
})

不忘初心1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 自定义轮播图

文章目录核心代码htmlcssjs核心代码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=
复制链接

扫一扫

专栏目录