移动端轮播图实例

最新推荐文章于 2022-05-03 22:52:23 发布

weixin_34301132

最新推荐文章于 2022-05-03 22:52:23 发布

阅读量220

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cckui/p/7731835.html

版权

移动端轮播图

采用手机端页面自适应解决方案—rem布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>移动端轮播图--cck</title>
<script type="text/javascript">
    // 手机端页面自适应解决方案—rem布局
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                docEl.style.fontSize = clientWidth / 15 + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    // 阻止pc和浏览器默认行为。
    document.addEventListener('touchstart',function(ev){
        ev.preventDefault();
    });
</script>
<style>
body{
    margin: 0;
}
.wrap{
    height: 8.4rem;
    position: relative;
}
.list{
    padding: 0;
    margin: 0;
    width:400%;
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
}
.list li{
    float: left;
    width: 15rem;
}
.list img{
    width: 15rem;
    display: block;
}
nav{
    width: 15rem;
    height: 10px;
    position: absolute;
    bottom: 10px;
    z-index: 1;
    text-align:center;
}
nav a{
    width:10px;
    height: 10px;
    display: inline-block;
    background: red;
    border-radius:50%;
    vertical-align:top;
}
nav a.active{
    background:#fff;
}

</style>
</head>
<body>
    <section class="wrap">
        <ul class="list">
            <li>
                <img src="http://img1.3lian.com/2015/a1/14/d/151.jpg" alt="" />
            </li>
            <li>
                <img src="http://photos.tuchong.com/110168/f/2034247.jpg" alt="" />
            </li>
            <li>
                <img src="http://img1.3lian.com/2015/a1/129/d/193.jpg" alt="" />
            </li>
            <li>
                <img src="http://img.kutoo8.com//upload/image/78018037/201305280911_960x540.jpg" alt="" />
            </li>
        </ul>
        <nav>
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </nav>
    </section>
<script type="text/javascript">

    var wrap = document.querySelector('.wrap'),
        list = document.querySelector('.list'),
        a = document.querySelectorAll('a');
        disX = 0, // 按下的坐标
        listL = 0, // 当前按下的list的left值
        w = wrap.clientWidth, // 一张图片的宽度
        len = 0,
        n = 0; // 默认第一个小点为白色

    list.innerHTML += list.innerHTML;  // 将list复制一份
    len = list.children.length; // list节点数量的长度
    list.style.width = w * len +'px';


    list.addEventListener('touchstart', start);
    list.addEventListener('touchmove', move);
    list.addEventListener('touchend', end);

    function start (ev) {
        var e = ev.changedTouches[0]; // changedTouches  为涉及当前事件的手指的一个列表

        list.style.transition = 'none';
        disX = e.pageX; // e.pageX——手指所按位置相对整个页面的坐标

        /*
            手指按下时，判断是第几张图片，若为第一张，则快速拉到第五张上;若为最后一张张，则快速拉到第四张上
        */

        var num = Math.round( list.offsetLeft / w );
        console.log(num)
        if(num == 0) {
            num = a.length;
            list.style.left = -num * w + 'px';
        }

        if(-num == len-1) {
            num = a.length - 1;
            list.style.left = -num * w + 'px';
        }       

        listL = this.offsetLeft;
    }

    function move (ev) {
        var e = ev.changedTouches[0];
        list.style.left = (e.pageX - disX) + listL +'px';
    }

    function end (ev) {
        var num = Math.round( list.offsetLeft / w ); // 当前需要显示的那一张图片的索引

        list.style.transition = '.5s';
        list.style.left = num * w +'px';

        a[n].className = '';
        a[-num % a.length].className = 'active';
        n = -num % a.length;
    }

</script>
</body>
</html>

转载于:https://www.cnblogs.com/cckui/p/7731835.html