jQuery之轮播图实现

最新推荐文章于 2023-09-14 18:36:20 发布

hongchen_lian

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量271

点赞数 1

文章标签： jquery css3 css html5

本文链接：https://blog.csdn.net/hongchen_lian/article/details/112830892

版权

jQuery之轮播图实现

实现效果

在这里插入图片描述
实现代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <script src="./public/js/jquery-3.3.1.min.js"></script>

    <style>
        ul,
        li {
            list-style: none;
        }

        img {
            width: 100%;
        }

        .scene_carousel {
            width: 500px;
            height: 500px;
            margin: auto;
            position: relative;
        }

        .scene_carousel>div {
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            position: absolute;
            top: calc((100% - 30px) / 2);
            z-index: 10;
            cursor: pointer;
        }

        .scene_img_left {
            left: 60px;
        }

        .scene_img_right {
            right: 60px;
        }

        .scene_img_flex {
            width: fit-content;
            height: 100%;
            display: flex;
            position: relative;
        }

        .scene_img_flex li {
            width: 248.83px;
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            opacity: 0;
            transition: all 0.3s ease-out;
            cursor: pointer;
        }

        .scene_img_flex li img {
            height: 380px;
        }

        .scene_word {
            padding: 5px 10px;
        }

        .scene_word h4 {
            text-align: center;
            font-size: 18px;
            line-height: 30px;
            font-weight: 300;
            font-weight: 400;
        }

        .scene_word p {
            font-size: 14px;
            line-height: 20px;
        }

        .scene_img6 {
            transform: translate3d(-224px, 0, 0) scale(0.81);
        }

        .scene_img_flex li.scene_img7 {
            transform: translate3d(0px, 0, 0) scale(0.81);
            transform-origin: 0 50%;
            opacity: 0.8;
            z-index: 2;
        }

        .scene_img_flex li.scene_img1 {
            transform: translate3d(124px, 0, 0) scale(1);
            z-index: 3;
            opacity: 1;
            background: #ffffff;
            box-shadow: 1px 1px 10px #ccc;
        }

        .scene_img_flex li.scene_img2 {
            transform: translate3d(248px, 0, 0) scale(0.81);
            transform-origin: 100% 50%;
            opacity: 0.8;
            z-index: 2;
        }

        .scene_img3 {
            transform: translate3d(474px, 0, 0) scale(0.81);
        }

        .scene_img4 {
            transform: translate3d(675px, 0, 0) scale(0.81);
        }

        .scene_img5 {
            transform: translate3d(876px, 0, 0) scale(0.81);
        }
    </style>
</head>

<body>
    <div class="scene_carousel">
        <div class="scene_img_left">
            <img src="./public/image/left.png" alt="左">
        </div>
        <div class="scene_img_right">
            <img src="./public/image/right.png" alt="右">
        </div>
        <ul class="scene_img_flex">
            <li class="scene_img1">
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1451075827,2436821212&fm=26&gp=0.jpg"
                    alt="">
                <div class="scene_word">
                    <h4>1</h4>
                </div>
            </li>
            <li class="scene_img2">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2097010937,3587306965&fm=26&gp=0.jpg"
                    alt="">
                <div class="scene_word">
                    <h4>2</h4>
                </div>
            </li>
            <li class="scene_img3">
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3118529426,2885674921&fm=26&gp=0.jpg"
                    alt="">
                <div class="scene_word">
                    <h4>3</h4>
                </div>
            </li>
            <li class="scene_img4">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3782597585,1782921943&fm=26&gp=0.jpg"
                    alt="">
                <div class="scene_word">
                    <h4>4</h4>
                </div>
            </li>
            <li class="scene_img5">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3821171310,2828217812&fm=26&gp=0.jpg"
                    alt="">
                <div class="scene_word">
                    <h4>5</h4>
                </div>
            </li>
            <li class="scene_img6">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F41%2F37%2F01300000169980121904374291568.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613629648&t=00acacfa8cfa90e4c188a6b11800bcb3"
                    alt="">
                <div class="scene_word">
                    <h4>6</h4>
                </div>
            </li>
            <li class="scene_img7">
                <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1144136955,2127408886&fm=26&gp=0.jpg"
                    alt="">
                <div class="scene_word">
                    <h4>7</h4>
                </div>
            </li>
        </ul>
    </div>

    <script>
        var cArr = ["scene_img1", "scene_img2", "scene_img3", "scene_img4", "scene_img5", "scene_img6",
            "scene_img7"
        ];
        var index = 0;
        $(".scene_img_left").on('click', function () {
            previmg();
        })
        $(".scene_img_right").on('click', function () {
            nextimg();
        })

        function previmg() {
            cArr.push(cArr[0]);
            cArr.shift();
            console.log(cArr);
            //i是元素的索引，从0开始
            //e为当前处理的元素
            //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
            $(".scene_img_flex>li").each(function (i, e) {
                $(e).removeClass().addClass(cArr[i]);
            })
            index--;
            if (index < 0) {
                index = 6;
            }
        }
        //下一张 
        function nextimg() {
            cArr.unshift(cArr[6]);
            cArr.pop();
            $(".scene_img_flex>li").each(function (i, e) {
                $(e).removeClass().addClass(cArr[i]);
            })
            index++;
            if (index > 6) {
                index = 0;
            }
        }
    </script>
</body>

</html>

hongchen_lian

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery之轮播图实现

jQuery之轮播图实现实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <script src="./pu
复制链接

扫一扫