jquery 轮播首尾相接

最新推荐文章于 2024-03-27 17:21:36 发布

LifeFuture1994

最新推荐文章于 2024-03-27 17:21:36 发布

阅读量407

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Future1994/article/details/110357619

版权

一、轮播时候首尾不衔接当从最后一张调到第一张或者从第一张调到最后一张时候过渡的时候长度过大（好几张图片的宽度）体验不好<!DOCTYPE html><html><head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, use

摘要由CSDN通过智能技术生成

一、轮播时候首尾不衔接当从最后一张调到第一张或者从第一张调到最后一张时候过渡的时候长度过大（好几张图片的宽度）体验不好

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>JQuery轮播图头尾不循环 体验较差</title>
    <script src="./js/jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }

        .list {
            width: 3000px;
            height: 400px;
            position: absolute;

        }

        .list>img {
            float: left;
            width: 600px;
            height: 400px;
        }

        .pointer {
            position: absolute;
            width: 100px;
            bottom: 20px;
            left: 250px;
        }

        .pointer>span {
            cursor: pointer;
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #7b7d80;
            border-radius: 50%;
            border: 1px solid #fff;
        }

        .pointer .on {
            background: #28a4c9;
        }

        .arrow {
            position: absolute;
            text-decoration: none;
            width: 40px;
            height: 40px;
            background: #727d8f;
            color: #fff;
            font-weight: bold;
            line-height: 40px;
            text-align: center;
            top: 180px;
            display: none;
        }

        .arrow:hover {
            background: #0f0f0f;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .container:hover .arrow {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="list" style="left:0px;">
            <!--<img src="../static/image/photo1.jpg" alt="5"/>-->
            <img src="./image/a.jpg" alt="1" />
            <img src=".//image/b.jpg" alt="2" />
            <img src="./image/c.jpg" alt="3" />
            <img src="./image/d.jpg" alt="4" />
            <img src&

最低0.47元/天解锁文章

LifeFuture1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
jquery 轮播首尾相接

一、轮播时候首尾不衔接当从最后一张调到第一张或者从第一张调到最后一张时候过渡的时候长度过大（好几张图片的宽度）体验不好<!DOCTYPE html><html><head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, use
复制链接

扫一扫