純原生jsは移動端の輪播図を実現して、純原生js純原生js純原生js!!!

まずhtml:コードは次の通りです.

<div class="carousel" id="carousel">
    <div class="imageList">
        <ul>
            <li><a href="#"><img src="img/0.png">a>li>
            <li><a href="#"><img src="img/1.png">a>li>
            <li><a href="#"><img src="img/2.png">a>li>
            <li><a href="#"><img src="img/3.png">a>li>
            <li><a href="#"><img src="img/4.png">a>li>
        ul>
    div>
div>

注意:以上の画像は自分の地元の画像に変えてください!!!移動端のビューポートを追加してくださいね
次はcssコードです.
  

*{
    margin: 0;
    padding: 0;
}
body{
    overflow: hidden;
}
.carousel{
    width:100%;
    overflow: hidden;
    border:1px solid black;
}
.carousel ul{
    list-style: none;
}
.carousel ul li{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
}
.carousel ul li img{
    width:100%;

}
次はjsコードです.コードは少し多いですが、各行にコメントがあります.

var carousel = document.getElementById('carousel');
var imageLis = document.querySelectorAll('#carousel ul li')
//   
var idx=2;
var next=3;
var prev=1;

var windowWidth;
//   
init();
//    
window.onreset = init;
function init() {
    //   ,       ,           
    windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //windowWidth / height = 200 /130;
    carousel.style.height = windowWidth / (200 / 130);
    //    li     
    for (var i=0; i<imageLis.length;i++){
        imageLis[i].style.webkitTransform = 'translateX(' + windowWidth + 'px)';
    }
    //         ,            
    noneTransition();
    //           ,   ,       
    changex();
}
function noneTransition() {
    imageLis[idx].style.transition = 'none';
    imageLis[next].style.transition = 'none';
    imageLis[prev].style.transition = 'none';
}
function changex() {
    imageLis[idx].style.webkitTransform = 'translateX(0px)';
    imageLis[next].style.webkitTransform = 'translateX(' + windowWidth + 'px)';
    imageLis[prev].style.webkitTransform = 'translateX(' + -windowWidth + 'px)';
}
//      
carousel.addEventListener('touchstart',touchstartHandle,false);
carousel.addEventListener('touchmove',touchmoveHandle,false);
carousel.addEventListener('touchend',touchendHandle,false);
//     
var deltaX;
//          
var startX;
//   
var startTime;

function touchstartHandle(event) {
    event.preventDefault();
    //      ,    1    ,  
    if (event.touches.length > 1){
        return;
    }
    //       
    deltaX = event.touches[0].clientX;
    //      
    startX = event.touches[0].clientX;
    //    
    noneTransition();
    //            
    changex();
    //         
    startTime = new Date();
}
function touchmoveHandle() {
    event.preventDefault();
    //     
    if (event.touches.length > 1){
        return;
    }
    //      
    var clientX = event.touches[0].clientX - deltaX;
    //              
    imageLis[idx].style.webkitTransform = 'translateX(' + clientX + 'px)';
    imageLis[next].style.webkitTransform = 'translateX(' + (windowWidth + clientX) + 'px)';
    imageLis[prev].style.webkitTransform = 'translateX(' + (-windowWidth + clientX) + 'px)';
}
function touchendHandle(event) {
     event.preventDefault();
     //        
    //      
    var distence = event.changedTouches[0].clientX - startX;
    //      
    var time = new Date() - startTime;
    console.log(distence,time);
    //                     ,    ,    
    //         500         30  
    //          ,    ,    
    if (distence >= windowWidth / 2 || (distence > 30 && time < 500)){
        console.log('      ');
        //     
        /*perv=1 idx=2 next=3
        * -->
        * prev=0 inx=1 next=2
        *
        * */
        next = idx;
        idx = prev;
        prev--;
        if (prev < 0){
            prev = 4;
        }

        //          ,             
        //              
        imageLis[idx].style.transition = 'all 0.3s ease 0s';
        imageLis[next].style.transition = 'all 0.3s ease 0s';
        //        
        imageLis[idx].style.webkitTransform = 'translateX(0px)';
        imageLis[next].style.webkitTransform = 'translateX(' + windowWidth + 'px)';

    } else if (distence < -windowWidth / 2 || (distence < -30 && time < 500)){
        showNext();
        console.log('      ')
    } else{
        console.log('    ')
        //    ,      
        imageLis[idx].style.transition = 'all 0.3s ease 0s';
        imageLis[prev].style.transition = 'all 0.3s ease 0s';
        imageLis[next].style.transition = 'all 0.3s ease 0s';
        //    
        changex();
    }
}
function showNext() {
    /*
    * prev=1 idx=2 next=3;
    * -->
    * prev=2 idx=3 next=4
    * */
    prev=idx;
    idx=next;
    next++;
    if (next > 4){
        next = 0;
    }
    //  next          
    imageLis[next].style.transition = 'none';
    imageLis[next].style.webkitTransform = 'translateX('+ windowWidth + 'px)';

    imageLis[idx].style.transition = 'all 0.3s ease 0s';
    imageLis[prev].style.transition = 'all 0.3s ease 0s';

    imageLis[idx].style.webkitTransform = 'translateX(0px)';
    imageLis[prev].style.webkitTransform = 'translateX(' + -windowWidth + 'px)';
}