移动端轮播图 - Android

TOP

移动端轮播图(一)

2019-09-01 23:48:28 【大中小】浏览:97次

这是结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/jd_phnoe.css">
    <link rel="stylesheet" href="./css/base.css">
    <title>Document</title>
  
    <script src="./js/jd_phnoe.js"></script>
</head>
<body>
        <div class="jd_layout">
        <div class="jd_banner">
                <ul class="jd_bannerimg clearfix">
                  <li>
                    <a href="java script:;"> <img src="./uploads/l1.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="java script:;"> <img src="./uploads/l2.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="java script:;"> <img src="./uploads/l3.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="java script:;"> <img src="./uploads/l4.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="java script:;"> <img src="./uploads/l5.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="java script:;"> <img src="./uploads/l6.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="java script:;"> <img src="./uploads/l7.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="java script:;"> <img src="./uploads/l8.jpg" alt="" /> </a>
                  </li>
                </ul>
                <!-- 点标记 -->
                <ul class="jd_bannerIndicator clearfix">
                  <li></li>
                  <li class="active"></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
        </div>
</body>
</html>

这是CSS

/* 搜索部分 */
.jd_layout{
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: auto;
    margin: 0px auto;
    background-color: #ccc;
}

/* 轮播图部分 */
.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_bannerimg{
    width: 1000%;
    position: relative;
}
.jd_bannerimg > li{
   width: 10%;
   float: left; 
}
.jd_bannerimg>li img{
    width: 100%;
    /*1.设置为块元素
    2.可以将文本的字体大小设置为0
    3.vertical-align:bottom*/
    display: block;
}
/* 点标记 */
.jd_bannerIndicator{
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
}
.jd_bannerIndicator li{
    width: 6px;
    height: 6px;
    float: left;
    border: 1px solid #fff;
    border-radius: 50%;
    /* opacity: 0.7; */
    margin: 0 3px;
    /* cursor: pointer; */
}
.jd_bannerIndicator li:first-of-type{
    margin-left: 0px;
}
.jd_bannerIndicator >li.active{
    background-color: #fff;
}

dase

/*公共样式*/

/*

首页上一页 1 2 3 下一页尾页 1/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：加载loading对话框的功能(不退出..	下一篇：Android入门第一课之Java基础