移动端仿京东轮播图

最新推荐文章于 2024-08-07 20:58:21 发布

帅的没朋友

最新推荐文章于 2024-08-07 20:58:21 发布

阅读量1.4k

点赞数 1

分类专栏：移动web 文章标签：移动端轮播图仿京东

本文链接：https://blog.csdn.net/oNiShiWoDeWeiYi1234/article/details/82875240

版权

该博客详细介绍了如何使用CSS、HTML和JavaScript技术，在移动端实现一款与京东风格相似的轮播图效果。内容包括CSS样式设定、HTML结构布局以及JavaScript动态功能的编写，并提供了所需的图片资源。

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

CSS部分

/* 轮播图 */

.jd_banner {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.jd_banner ul:first-child {
    width: 1000%;
    transform: translateX(-10%);
    -webkit-transform: translateX(-10%);
}

.jd_banner ul:first-child li {
    width: 10%;
    float: left;
}

.jd_banner ul:first-child li a {
    /*
     去掉下间距(三种方法)：
    1. display:block;
    2. font-size:0;
    3. vertical-align: middle
     */
    display: block;
    width: 100%;
}

.jd_banner ul:first-child li a img {
    display: block;
    width: 100%;
}

.jd_banner ul:last-child {
    width: 118px;
    height: 6px;
    position: absolute;
    left: 50%;
    margin-left: -59px;
    bottom: 6px;
}

.jd_banner ul:last-child li {
    width: 6px;
    height: 6px;
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    margin-left: 10px;
}

.jd_banner ul:last-child li:first-child {
    margin-left: 0;
}

.jd_banner ul:last-child .now {
    background-color: #fff;
}

HTML部分

 <!-- 轮播图 -->
        <div class="jd_banner">
            <!-- 无缝滑动 -->
            <ul class="clearFix">
                <li>
                    <a href="#"><img src="images/l8.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/l1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/l2.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#&#