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>

mobile_轮播图_style_left 版本的更多相关文章

  1. mobile_轮播图_transform 版本_transform 读写二合一

    轮播图_transform 版本 关键点: 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 语句解析太快,使用 set ...

  2. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  3. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...

  4. jquery版本轮播图（es5版本，兼容高）

    优势:基于es5,兼容高.切换动画css配置,轻量,不包含多余代码,可扩展性很高,多个轮播图不会冲突,可配置独有namespace 注: 1.项目需要所写,所以只写了页码的切换,未写上一页下一页按钮, ...

  5. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  6. （新手向）基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  7. swift－自定义无限轮播图

    一  前言 1.之前一直在用OC编程,最近才开始接触使用swift就发现使用OC越来越不习惯,感觉已经爱上了swift. 2.这个自定义轮播图只是对之前OC版本进行了翻译,欢迎指正. 3.我决定一步步 ...

  8. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  9. ⒃bootstrap组件 轮播图 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [再寄小读者之数学篇](2014-06-22 最大值点处导数为零的应用 [中国科学技术大学2012 年高等数学B考研试题])

    设 $f(x)$ 在 $[0,1]$ 上连续, 在 $(0,1)$ 内可导, 且 $f(0)=f(1)=0$, $f\sex{\cfrac{1}{2}}=1$. 证明:对于任意的实数 $\lm$, 一 ...

  2. jQuery实现获取选中复选框的值

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Jq ...

  3. cvc-complex-type.2.4.a: Invalid content was found starting with element 'asy

  4. mysql语句实战

    请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号:   这个比较难, 3.查询平均成绩大于60分的同学的学号和平均成绩: 4.查 ...

  5. 网络学习day01_计算机网络与分层思想

    2018.9.1 网络学习day01_计算机网络与分层思想 网络安全 计算机网络 分层思想    LAN与WAN   LAN(Local Area Network)--局域网   局域网(Local ...

  6. error: no matching function for call to 'std::exception:exception(const char[16])'

    环境:codeblocks 语言:C++ 在执行:throw new exception("queue is empty.");时 遇到问题:error: no matching ...

  7. 解析电子墨水屏技术（工作原理与LCD的区别）【转】

    转自:https://blog.csdn.net/weixin_42509369/article/details/84646808 阅读电子书早已成为大家生活中一部分,方便轻巧的电子版书籍更便于携带, ...

  8. FizzBuzz

    写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出“Fizz”: 2. 如果 n 是5的倍数,输出“Buzz”: 3.如果 n 同时是3和5的倍数,输出 “FizzB ...

  9. Python爬虫实战一之爬取QQ音乐

    一.前言   前段时间尝试爬取了网易云音乐的歌曲,这次打算爬取QQ音乐的歌曲信息.网易云音乐歌曲列表是通过iframe展示的,可以借助Selenium获取到iframe的页面元素, 而QQ音乐采用的是 ...

  10. java----dom4j 解析XML

    dom4j: 由于内部采用迭代器,适合读取大文档: 数据块 1.下载 https://dom4j.github.io/ 2.添加包到工程目录下 使用 import org.dom4j.Document ...