mobile_轮播图_style_left 版本

mobile 轮播图

小圆点逻辑（排他）

1. 统一给所有 span 元素加 class="";

2. 切换到谁，谁的 class="active";

 

  • 移动端轮播图
  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
        <title>移动端轮播图</title>

        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            a {
                text-decoration: none;
            }
            
            ul,
            ol {
                list-style: none;
            }
            
            input {
                outline: none;
            }
            
            img {
                display: block;
            }
            
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            
            #wrap {
                width: 100%;
                height: 100%;
                
                background-color: #96b377;
            }
            
            /**** ****/
            #wrap {
                position: relative;
            }
            
            #wrap #ul_list  {
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                width: 500%;
            }
            
            #wrap #ul_list>li {
                float: left;
            }
            
            #wrap #ul_list>li>a>img{
                width: 100%;
            }
            
            /**** 小圆点  ****/
            #ol_list {
                position: absolute;
                bottom: 10px;
                right: 10px;
                width: 75px;
                display: flex;
                justify-content: space-between;
            }
            
            #ol_list li {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: gray;
            }
            
            #ol_list li.active {
                background-color: deeppink;
            }
        </style>
    </head>
    
    <body>
        
        <!-- 模拟手机屏幕 -->
        <section id="wrap">
            <ul id="ul_list">
                <li>
                    <a href="javascript:;"><img src="./img/Deadpool.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/Groot.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/Hock.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/RocketRaccoon.jpg"/></a>
                </li>
                
                <li>
                    <a href="javascript:;"><img src="./img/SpiderMan.jpg"/></a>
                </li>
            </ul>
            
            <ol id="ol_list">
                <li data-pindex="0" class="active"></li>
                <li data-pindex="1"></li>
                <li data-pindex="2"></li>
                <li data-pindex="3"></li>
                <li data-pindex="4"></li>
            </ol>
        </section>
        
        
        
        
        <!-- javascript 代码 -->
        <script type="text/javascript">
            // 取消默认行为
            document.addEventListener("touchstart", function(e){
                e.preventDefault();
            }, false);
            
            // 点透处理
            
            var clientWidth = document.documentElement.clientWidth;
            // 适配
            (function(){
                
                /* 1. 创建 style 标签 */
                var styleNode = document.createElement("style");

                /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */
                styleNode.innerHTML = "html {"+
                                           "font-size:"+clientWidth/16+"px !important"+
                                      "}";    /* IPhone 6 的 font-size: 23.4375px */

                /* 3. 把 style 标签追加到 head 标签里 */
                document.head.appendChild(styleNode);
            }());
            
            var wrap = document.getElementById("wrap");
            var ulList = document.getElementById("ul_list");
            var olList = document.getElementById("ol_list");
            
            var lis = document.querySelectorAll("#ul_list>li");
            var points = document.querySelectorAll("#ol_list>li");
            
            window.onload = function(){
                var styleNode = document.createElement("style");
                styleNode.innerHTML = "#ul_list {width:"+lis.length+"00%;}";
                styleNode.innerHTML += "#ul_list>li {width:"+100/lis.length+"%;}";
                document.head.appendChild(styleNode);
                
                styleNode.innerHTML += "#wrap {height:"+lis[0].offsetHeight+"px;}";
            };
            
            var oldUlX = 0;
            var oldTouchX = 0;
            var curIndex = 0;
            wrap.addEventListener("touchstart", function(e){
                var touch = e.changedTouches;
                
                oldTouchX = touch[0].clientX;
                oldUlX = ulList.offsetLeft;
            },false);
            
            wrap.addEventListener("touchmove", function(e){
                var touch = e.changedTouches;
                
                var newTouchX = touch[0].clientX;
                var newUlX = oldUlX + (newTouchX - oldTouchX);
                
                if(newUlX > 0){
                    newUlX = 0;
                }else if(newUlX < -ulList.offsetWidth+clientWidth){
                    newUlX = -ulList.offsetWidth+clientWidth;
                }
                
                ulList.style.left = newUlX + "px";
            },false);
            
            wrap.addEventListener("touchend", function(){
                curIndex = Math.round(-ulList.offsetLeft/clientWidth);
                
                ulList.style.left = -curIndex*clientWidth + "px";
                
                for(var i=0; i<points.length; i++){
                    points[i].className = "";
                };
                points[curIndex].className = "active";
            },false);
            
            olList.addEventListener("touchstart", function(e){
                touch = e.changedTouches;
                e.stopPropagation();
                ele = touch[0].target;
                if(ele.nodeName == "LI"){
                    for(var i=0; i<points.length; i++){
                        points[i].className = "";
                    };
                    ele.className = "active";
                    
                    curIndex = +ele.dataset.pindex;
                    ulList.style.left = -curIndex*clientWidth + "px";
                };
            }, false);
        </script>
    </body>
</html>

 

posted @ 2018-11-24 15:37  耶梦加德  阅读(207)  评论(0)  编辑  收藏  举报