图片轮播---兼容移动端

最新推荐文章于 2023-06-04 16:00:52 发布

impossible1994727

最新推荐文章于 2023-06-04 16:00:52 发布

阅读量749

点赞数

分类专栏： css+js 文章标签：图片轮播移动端 setInterval

本文链接：https://blog.csdn.net/impossible1994727/article/details/71171633

版权

css+js 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

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

    .innercontainer {
        position: relative;
        width: 800%;
        left: 0;
        right: 0;
    }

    .wraperimg {
        width: 500px;
        float: left;
    }

    .pagination {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }

    .pagination span {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: salmon;
        line-height: 5px;
        border-radius: 100%;
        margin-right: 10px;
    }

    .pagination .active {
        background: aqua;
        color: white;
    }

    img {
        width: 100%;
        height: 400px;
    }
</style>

<body>
    <div class="container">
        <div class="innercontainer">
            <div class="wraperimg"><img src="img/1.png" /></div>
            <div class="wraperimg"><img src="img/2.png" /></div>
            <div class="wraperimg"><img src="img/3.png" /></div>
            <div class="wraperimg"><img src="img/4.png" /></div>
        </div>
        <div class="pagination">
            <!--<span class="active"></span>-->
        </div>
    </div>
</body>  
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>  
<script type="text/javascript">
    // 插入第一张图在尾部
    var firstimg = $(".innercontainer .wraperimg:first-child img")[0].src;
    console.log(firstimg, 'fiss')
    var lastimg = $(" <div class='wraperimg'>" +
        "<img src = '" + firstimg + "' />" +
        "</div >");
    $(".innercontainer .wraperimg:last-child").after(lastimg)
    //屏幕宽度
    var viewWidth = $(window).width();
    $('.wraperimg').css('width', viewWidth);
    //插入小店
    var imglenght = $('img').length;
    var newspan;
    for (var i = 0; i < imglenght - 1; i++) {
        if (i == 0) {
            newspan = $('<span class="active"></span>');
            $('.pagination').append(newspan);
        } else {
            newspan = $('<span></span>');
            $('.pagination').append(newspan);
        }
    }
    //移动端
    var browser = {
        versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
        $('body').on('touchstart', '.container', function (e) {
            var touch = e.originalEvent;
            var startX = touch.changedTouches[0].pageX;
            $('.container').on('touchmove', function (e) {
                e.preventDefault();
                touch = e.originalEvent.touches[0] || e.originalEvent.changedtouches[0];
                if (touch.pageX - startX > 10) {
                    $('.container').off('touchmove');
                    flag = false;
                    clearInterval(timer);
                    if (_index == 0) {
                        _index = innercontainerGroup.length - 1;
                        $(".innercontainer").css("left", -(innercontainerGroup.length - 1) * imgWidth);
                    }
                    _index--;
                    selectPic(_index);
                } else if (touch.pageX - startX < -10) {
                    $('.container').off('touchmove');
                    flag = false;
                    clearInterval(timer);
                    _index++;
                    selectPic(_index);
                }
            })
            return false;
            //                alert(touch)
        }).on('touchend', function () {
            $('.container').off('touchmove');
            timer = setInterval(go, 3000);
        });
    }
    //轮播
    var innercontainerGroup = $('.wraperimg');
    var spanGroup = $('.pagination span');
    var imgWidth = $('.wraperimg img:first-child').eq(0).width();
    var _index = 0;
    var timer = null;
    var flag = true;
    function autogo(bol) {
        if (bol) {
            timer = setInterval(go, 3000);
        }
    }
    autogo(flag);
    function go() {
        _index++;
        selectPic(_index);
    }
    function selectPic(num) {
        $('.pagination span').eq(num).addClass('active').siblings().removeClass('active');
        $('.innercontainer').animate({
            left: -num * imgWidth,
        }, 1000, function () {
            if (_index == innercontainerGroup.length - 1) {
                _index = 0;
                $('.innercontainer').css('left', '0px');
                $('.pagination span').eq(0).addClass('active').siblings().removeClass('active');
            }
        })
    }

</script>

</html>

impossible1994727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播---兼容移动端

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><style type="text/css"> * { margin: 0; paddin...
复制链接

扫一扫

专栏目录