原生jsはシームレスな転がり輪播図(移動端)-自動輪播を実現する

28142 ワード

jsユーティリティコード輪播図げんせいjs 移動端オートローテーションカスタム数

どのプラグインやライブラリにも依存しないで、原生jsでモバイル端末の自動ラウンドを実現したいと思っています.ネット上のものが気に入らないことに気づきました.いっそ自分で書いてください.コードには一部の参考があります.くだらないことは言わないで、コードを書きます.

head部分、何も言うことはありません:

<meta charset="utf-8">
        <meta name="copyright" content="">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>  js         title>

2.html部分、引用画像はhttp://lorempixel.com/400/200/あ、これはランダムに画像を生成できるサイトで、使いやすいです.

<div class="banner" id="banner">
    <div class="slider_list">

        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=0" title="">
            a>
        div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=1" title="">
            a>
        div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=2" title="">
            a>
        div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=3" title="">
            a>
        div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=4" title="">
            a>
        div>

    div>
    <ol class="pagination">ol>
div>

3.cssセクション:

* {
    margin: 0;
    padding: 0;
}
body{
    margin: 0 auto;
    max-width: 600px;
}
ul,
ol {
    list-style: none;
}
.banner {
    position: relative;
    background-color: #FFFFFF;
    margin-top: 20px;
    overflow: hidden;
}
.banner:after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    line-height: 0;
    clear: both;
}
.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}
.banner .slider_list .swiper-slide {
    float: left;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}
.banner .slider_list a {
    display: block;
}
.banner .slider_list img {
    display: block;
    width: 100%;
}
.banner .pagination {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
}
.banner .pagination li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    border-radius: 5px;
    background: #e9e9e9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
.banner .pagination li.active {
    background: #fc6b00
}

4.コアコンテンツ、js部分

document.addEventListener('DOMContentLoaded', function() {
    var slider_content = document.querySelector('#banner .slider_list');
    var slider_items = slider_content.children;
    var num = slider_items.length;
    slider_content.style.width = (num + 2) * 100 + '%';
    slider_content.style.transform = 'translateX(-' + 100 / (num + 2) + '%)';
    slider_content.appendChild(slider_items[0].cloneNode(true));
    slider_content.insertBefore(slider_items[num - 1].cloneNode(true), slider_items[0]);
    var pagination = document.querySelector('#banner ol');
    for(var i = 0; i < num; i++) {
        var creatLi = document.createElement('li');
        pagination.appendChild(creatLi);
    }
    for(var i = 0; i < num + 2; i++) {
        slider_items[i].style.width = 100 / (num + 2) + '%';
    }
    var pagination_items = pagination.children;
    pagination_items[0].classList.add('active');
    var iNow = 1;
    var x = -iNow * slider_items[0].offsetWidth;
    //         , css       
    var bReady = true;
    slider_content.addEventListener('touchstart', function(ev) {
        clearInterval(timer);
        if(bReady == false) {
            return;
        }
        bReady = false;
        slider_content.style.transition = 'none';
        var disX = ev.targetTouches[0].pageX - x;
        var downX = ev.targetTouches[0].pageX;

        function fnMove(ev) {
            x = ev.targetTouches[0].pageX - disX;
            slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
        }

        function fnEnd(ev) {
            var upX = ev.changedTouches[0].pageX;
            //          50
            if(Math.abs(upX - downX) > 50) {
                //    
                if(upX - downX < 0) {
                    iNow++;
                    if(iNow == slider_items.length) {
                        iNow = slider_items.length - 1;
                    }
                    if(iNow == num + 1) {
                        pagination_items[num - 1].classList.remove('active');
                        pagination_items[0].classList.add('active');
                    } else {
                        pagination_items[iNow - 1].previousElementSibling.classList.remove('active');
                        pagination_items[iNow - 1].classList.add('active');
                    }

                } else {
                    //    
                    iNow--;
                    if(iNow == -1) {
                        iNow = 0;
                    }
                    if(iNow == 0) {
                        pagination_items[0].classList.remove('active');
                        pagination_items[num - 1].classList.add('active');
                    } else {
                        pagination_items[iNow - 1].nextElementSibling.classList.remove('active');
                        pagination_items[iNow - 1].classList.add('active');
                    }
                }
            }
            //    ul   
            x = -iNow * slider_items[0].offsetWidth;
            slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
            slider_content.style.transition = '500ms all ease';

            //  li        li       
            function tEnd() {
                if(iNow == num + 1) {
                    iNow = 1;
                }
                if(iNow == 0) {
                    iNow = num;
                }
                slider_content.style.transition = 'none'
                x = -iNow * slider_items[0].offsetWidth;
                slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
                bReady = true;
            }
            slider_content.addEventListener('transitionend', tEnd, false);
            //    
            document.removeEventListener('touchend', fnEnd, false);
            document.removeEventListener('touchmove', fnMove, false);
        }

        document.addEventListener('touchmove', fnMove, false);
        document.addEventListener('touchend', fnEnd, false);
        //      
        ev.preventDefault();
    }, false);

    //    
    var timer=setInterval(function() {
        iNow++;
        if(iNow == num + 1) {
            x = -1 * slider_items[0].offsetWidth;
            pagination_items[num - 1].classList.remove('active');
            pagination_items[0].classList.add('active');
            slider_content.style.transition = 'none';
            slider_content.style.transform = 'translate3d(' + 0 * slider_items[0].offsetWidth + 'px,0,0)';
            setTimeout(function() {
                slider_content.style.transition = '500ms all ease';
                slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
            })
            bReady = true;
            iNow = 1;
        } else {
            slider_content.style.transition = 'none';
            x = -iNow * slider_items[0].offsetWidth;
            slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
            slider_content.style.transition = '500ms all ease';
            bReady = true;
            pagination_items[iNow - 1].previousElementSibling.classList.remove('active');
            pagination_items[iNow - 1].classList.add('active');
        }
    }, 3000)
}, false);

          ，  html      ，js       ，        。

Android StudioでCMakeを使うのはどんな体験ですか

SQLyogがexcelファイルでmysqlデータベースをインポートできませんでした:[Microsoft][ODBC Excelドライバ]保留エラー(-5016);このようなエラーメッセージはありません