幾種原生js輪播圖

cod7ce 發(fā)布于2019-08-29 13:21 / 1151人閱讀

摘要：由于各種各樣的原因比如說(shuō)懶，本文直接在代碼里面用注釋序號(hào)記錄實(shí)現(xiàn)的思路普通版原理一個(gè)包含多張圖片的其中所有的左浮動(dòng)成一排，實(shí)際過(guò)程就是將往左右邊移動(dòng)，改變值。

由于各種各樣的原因（比如說(shuō)懶），本文直接在代碼里面用注釋+序號(hào)記錄實(shí)現(xiàn)的思路

1.普通版

原理：一個(gè)包含多張圖片的ul,其中所有的li左浮動(dòng)成一排，實(shí)際過(guò)程就是將ul往左（右）邊移動(dòng)，改變left值。

效果圖：實(shí)際應(yīng)用的時(shí)候.screen的overflow:hidden。只能看到中間方框的部分
在線demo

HTML

<>

其中

用來(lái)存放動(dòng)態(tài)生成的小方塊。

css部分代碼

.screen li {
  width: 200px;
  height: 200px;
  overflow: hidden;
  float: left;
}
.all ol li {
  float: left;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid red;
  margin-left: 10px;
  cursor: pointer;
}
.all ol li.current {
  background: yellow;
}

js（有用了自己封裝的一個(gè)動(dòng)畫(huà)函數(shù)）

//動(dòng)畫(huà)函數(shù)
function animate(el, target){
    if(el.timer) {
        clearInterval(el.timer);
    }
    el.timer = setInterval(function () {
        //leader = leader + step
        var leader = el.offsetLeft;
        var step = 30;
        if(target < leader) {
            step = -step;
        }
        //如果到達(dá)終點(diǎn)的距離已經(jīng)小于一步了，就直接跨到終點(diǎn)。
        if(Math.abs(target-leader) >= Math.abs(step)) {
            leader = leader + step;
            el.style.left = leader + "px";
        }else {
            clearInterval(el.timer);
            el.style.left = target + "px";
        }
    }, 15);
}
    //1. 找對(duì)象
    var box = document.querySelector(".all");
    var screen = document.querySelector(".screen");
    var ul = screen.children[0];
    var ullis = ul.children;
    var ol = screen.children[1];
    var arr = document.querySelector("#arr");
    var leftArr = arr.querySelector(".left");
    var rightArr = arr.querySelector(".right");
    var imgwidth = screen.offsetWidth;

    var pic = fk = 0;
    var timer;
    //2. 動(dòng)態(tài)創(chuàng)建結(jié)構(gòu)
    //2.1 創(chuàng)建小方塊,ulLis
    //根據(jù)ul中l(wèi)i的個(gè)數(shù)創(chuàng)建小方塊
    for(var i = 0; i < ullis.length; i++){
        var li = document.createElement("li");
        ol.appendChild(li);
        li.innerHTML = i + 1;
    }
    var ollis = ol.children;
    ollis[0].className = "current";

    //2.2 創(chuàng)建假圖片
    //2.2.1 克隆ul下的第一個(gè)li
    var cloneli = ullis[0].cloneNode(true);
    ul.appendChild(cloneli);
    //3. 簡(jiǎn)單輪播功能
    //3.1 給小方塊注冊(cè)點(diǎn)擊事件
    for(var i=0;i
2. 3D版
原理：切割的思路其實(shí)是讓四個(gè)圖片拼成一個(gè)圖片 ，并且讓每一張圖片都往左走一定的距離結(jié)合了css3動(dòng)畫(huà)
效果圖：在線demo

HTML

  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
      


  
  

不要把按鈕放到box里面,一旦放到這里面，它默認(rèn)就會(huì)成為一個(gè)項(xiàng)目,從而影響整個(gè)的ul。
css部分代碼
    *{
        padding:0;
        margin:0;
        list-style-type: none;
    }
    .box{
        width:533px;
        height:300px;
        margin:100px auto 0;
        border: 1px solid #000;
        /* 讓盒子變成一個(gè)伸縮容器 */
        display:flex;
    }
    /* 第一步  需要制作出一個(gè)長(zhǎng)方體 */
    .box ul{
        width:533px;
        height:300px;
        position:relative;
        transform-style: preserve-3d;
        transition: transform 1s;
    }
    .box ul:nth-child(1){
        transition-delay: 0s;
    }
    .box ul:nth-child(2){
        transition-delay: 0.2s;
    }
    .box ul:nth-child(3){
        transition-delay: 0.4s;
    }
    .box ul:nth-child(4){
        transition-delay: 0.6s;
    }
    .box > ul > li{
        /* 這里最好是設(shè)置成width:100%  讓它繼承收縮后的UL的寬度*/
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        /* 這個(gè)切割一定是加給li的 ul加的話會(huì)把3D空間給干掉*/
        overflow:hidden;
    }
    .box > ul > li:nth-child(1){
        transform:rotateX(90deg) translateZ(150px);/* 上面 */
    }
    .box > ul > li:nth-child(2){
        transform:rotateX(-90deg) translateZ(150px);/* 下面 */
    }
    .box > ul > li:nth-child(3){
        transform:translateZ(150px);/* 正面 */
    }
    .box > ul > li:nth-child(4){
        transform:rotateX(180deg) translateZ(150px);/* 背面 */
    }
    .box > ul:nth-child(2) img{
        margin-left: -134px;
    }
    .box > ul:nth-child(3) img{
        margin-left: -268px;
    }
    .box > ul:nth-child(4) img{
        margin-left: -402px;
    }
    .btn_wrap{
        width:760px;
        height:0px;
        margin:0 auto;
        position:relative;
        top:-250px;
    }
    .btn_wrap button{
        width:100px;
        height:100px;
    }
    .btn_wrap button:nth-child(1){
        float: left;
    }
    .btn_wrap button:nth-child(2){
        float: right;
    }
js部分
    // 需求 點(diǎn)擊按鈕一次，就讓長(zhǎng)方體沿著X軸旋轉(zhuǎn)90度（是基于上一次的角度累加或者累減）
    var box = document.querySelector(".box");
    var _ul = box.querySelectorAll("ul");
    var _li = box.querySelectorAll("li");
    var btns = document.querySelectorAll("button");
    // 聲明一個(gè)信號(hào)量,以便計(jì)算需要旋轉(zhuǎn)的度數(shù)
    var num = 0;
    // 當(dāng)用戶(hù)暴力點(diǎn)擊的時(shí)候會(huì)出現(xiàn)過(guò)度執(zhí)行不過(guò)來(lái)的BUG情況，需要函數(shù)節(jié)流。聲明一個(gè)開(kāi)關(guān)變量
    var flag = true;
    
    _ul[_ul.length -1].addEventListener("transitionend",function(){
        console.log(1);
        // 在過(guò)渡執(zhí)行完畢之后重新打開(kāi)開(kāi)關(guān)
        flag = true;
    })

    for(var i = 0; i < btns.length; i++){
        btns[i].setAttribute("data-index", i);
        btns[i].addEventListener("click",function(){
            if(flag){
                flag = false;
                // 每次點(diǎn)擊進(jìn)行一次判斷后在累加或者累減
                // 通過(guò)this去找到當(dāng)前對(duì)象的自定義下標(biāo)
                var index = this.dataset["index"];
                if(index == 1){
                    num++;
                }else if(index == 0){
                    num--;
                }
                // 給所有的UL添加翻轉(zhuǎn)效果
                for(var i = 0; i < _ul.length; i++){
                    _ul[i].style.transform = "rotateX("+num*90+"deg)";
                }
            }
        })
    }
3. 移動(dòng)端
原理：利用定位，分為左中右
效果圖：在線demo

HTML
同普通版
css部分代碼
.carouse-wrap {
    position: relative;
    min-height: 143px;
}

.carouse-wrap li {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform : translateX(100%);
}
js部分（代碼較長(zhǎng)，只放了重點(diǎn)部分，完整代碼見(jiàn)文末）
// 將最初始的位置賦值
left = carouseWrapLi.length - 1;
center = 0;
right = 1;
// 將最開(kāi)始的三張先就位
carouseWrapLi[left].style.transform = "translateX("+ -windowWidth +"px)";
carouseWrapLi[center].style.transform = "translateX(0px)";
carouseWrapLi[right].style.transform = "translateX("+ windowWidth +"px)";
// 看到下一張的邏輯
function showNext(){
    // 輪轉(zhuǎn)下標(biāo)
    left = center;
    center = right;
    right++;

    // 極值判斷
    if(right > carouseWrapLi.length - 1){
        right = 0;
    }

....

// 手指touch的時(shí)候去切換圖片
jdCarouse.addEventListener("touchstart",touchstartHandler);
jdCarouse.addEventListener("touchmove",touchmoveHandler);
jdCarouse.addEventListener("touchend",touchendHandler);

var startX = 0;  // 記錄開(kāi)始的時(shí)候的手指落點(diǎn)
var moveX = 0;    // 記錄移動(dòng)最終的手指落點(diǎn)
var starTime = null;

function touchstartHandler(event){
    // 記錄滑動(dòng)開(kāi)始的時(shí)間
    starTime = new Date();
    // 在最開(kāi)始的時(shí)候清除定時(shí)器
    clearInterval(carouseTimer);
    // 獲取手指的落點(diǎn)
    startX = event.touches[0].pageX;
4. 純css3無(wú)縫滾動(dòng)版
原理：結(jié)合CSS3的@keyframes
效果圖：在線demo

HTML

    
        
        
        
        
        
        
        
    

css
* {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.box {
    width: 533px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.box:hover ul{
    /* 在hover的時(shí)候讓動(dòng)畫(huà)暫停 */
    animation-play-state:paused;
}
img{
    display: block;
}
ul {
    width: 3198px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    animation: wufeng 10s linear infinite;
}
@keyframes wufeng{
    0%{
        left: 0;
    }
    100%{
        left: -2132px;
    }
}
ul li{
    float: left;
}
完整代碼可以去:
https://github.com/aloe2014/s...
https://github.com/aloe2014/s... (移動(dòng)版)
(此文獻(xiàn)與對(duì)原生js動(dòng)畫(huà)保有熱愛(ài)的我們......)