JS实现无限轮播无倒退效果

最新推荐文章于 2024-05-18 18:26:40 发布

ggggmlor

最新推荐文章于 2024-05-18 18:26:40 发布

阅读量1.5k

点赞数 4

分类专栏： Javascript 轮播文章标签：无限轮播

本文链接：https://blog.youkuaiyun.com/qq_37728271/article/details/85941718

版权

原理：每次移动前设置transition过渡效果，完成清除过渡效果，然后在到达最后一张图片的时候在清除过渡效果之后translateX（0）

另外需要jq的引用

HTML：

<div class="slide-container" view-count="3">
    <ul>
        <li>
            <img src="images/women/15444293310974910.jpg" alt=""/>
        </li>
        <li>
            <img src="images/women/15444293312083674.jpg" alt=""/>
        </li>
        <li>
            <img src="images/women/15444293313734437.jpg" alt=""/>
        </li>
        <li>
            <img src="images/women/15444293315979953.jpg" alt=""/>
        </li>
        <li>
            <img src="images/women/15444293316955485.jpg" alt=""/>
        </li>
        <li>
            <img src="images/women/15444293317767707.jpg" alt=""/>
        </li>
    </ul>
</div>

CSS：

.slide-container {
            max-width: 1230px;
            margin: auto;
            overflow: hidden;
        }
        .slide-container li {
            float: left;
        }
        .slide-container img {
            width: 100%;
        }

JS:

最低0.47元/天解锁文章