js原生輪播圖

輪播圖案例核心思想
1.當鼠標經過時，左右按鈕顯示，鼠標離開時，左右按鈕隱藏
2.動態生成小圓點，第一個小圓點高亮
3.點擊小圓點，圖片跟隨移動
①利用自定義屬性記錄圖片所在元素的序列號index
②當點擊當前小圓點，圖片移動index圖片的offsetWidth.
③克隆第一張圖片放在最右邊，位置一定放在動態創建小圓點的後面
4.點擊按鈕圖片移動（右側）左側相反
①聲明一個num變量記錄點擊的次數
②當點擊一次按鈕時，圖片移動num圖片的offsetWIdth
③當點擊的次數等於圖片的（數組）的索引時，圖片所在父元素最左側，讓num重新等於0；
5.點擊小圓圈，圖片移動時，小圓圈也跟隨移動並顯示高亮
①聲明播放小圓圈的跟隨移動的變量
②當圖片移動一次，小圓圈自增1
③當播放次數等於圖片的長度時，次數回到0
④排他思想，播放當前次數時，給當前次數（current）設置設置爲高亮
6.自動播放
①給點擊按鈕添加定時器，沒兩秒後讓按鈕自動點擊。
②鼠標經過時定時器關閉
③鼠標離開時，開啓定時器
④爲了連貫性，讓前面聲明的num circle與自動播放的次數一致，要把點擊當前圖片元素的序號賦值給num 和circle
7.爲了防止用戶連續點擊過快，應該添加回調函數，當自動播放完成後才能地點擊（節流閥）
①設置一個布爾類型變量，檢測是否播放
②是否等於true 如果等於true 關閉爲false
③利用回調函數當動畫函數執行完畢打開 true

css代碼
		
			 <style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .w {
        width: 1200px;
        margin: 0 auto;
    }
    
    .main {
        width: 980px;
        height: 455px;
        margin-left: 219px;
        margin-top: 10px;
    }
    
    .focus {
        position: relative;
        width: 721px;
        height: 455px;
        /* background-color: purple; */
        overflow: hidden;
    }
    
    .focus ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 800%;
    }
    
    .focus ul li {
        float: left;
    }
    
    .arrow-l,
    .arrow-r {
        display: none;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        width: 24px;
        height: 40px;
        background: rgba(0, 0, 0, .3);
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-family: 'icomoon';
        font-size: 18px;
        /* 提高左右箭頭層級 */
        z-index: 2;
    }
    
    .arrow-r {
        right: 0;
    }
    
    .circle {
        position: absolute;
        bottom: 10px;
        left: 50px;
    }
    
    .circle li {
        float: left;
        width: 8px;
        height: 8px;
        /* background-color: #fff; */
        border: 2px solid rgba(255, 255, 255, 0.5);
        margin: 0 3px;
        border-radius: 50%;
        /*鼠標經過顯示小手*/
        cursor: pointer;
    }
    
    .current {
        background-color: #fff;
    }
    
    li a img {
        width: 721px;
        height: 455px;
    }
</style>

html代碼

		 <div class="w">
    <div class="main">
        <div class="focus fl">
            <!-- 左側按鈕 -->
            <a href="javascript:;" class="arrow-l">
                    &lt;
                 </a>
            <!-- 右側按鈕 -->
            <a href="javascript:;" class="arrow-r"> > </a>
            <!-- 核心的滾動區域 -->
            <ul>
                <li>
                    <a href="#"><img src="images/(1).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(2).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(3).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(4).jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/(5).jpg" alt=""></a>
                </li>

                <!-- 小圓圈 -->
                <ol class="circle">

                </ol>
        </div>

    </div>
</div>

js部分動畫部分

function animate(obj, target, callback) {
// console.log(callback);  callback = function() {}  調用的時候 callback()

// 先清除以前的定時器，只保留當前的一個定時器執行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
    // 步長值寫到定時器的裏面
    // 把我們步長值改爲整數 不要出現小數的問題
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
        // 停止動畫 本質是停止定時器
        clearInterval(obj.timer);
        // 回調函數寫到定時器結束裏面
        // if (callback) {
        //     // 調用函數
        //     callback();
        // }
        callback && callback();
    }
    // 把每次加1 這個步長值改爲一個慢慢變小的值  步長公式：(目標值 - 現在的位置) / 10
    obj.style.left = obj.offsetLeft + step + 'px';

}, 15);

}

js輪播部分

			window.addEventListener('load', function() {
// 1. 獲取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 2. 鼠標經過focus 就顯示隱藏左右按鈕
focus.addEventListener('mouseenter', function() {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    // 鼠標懸浮,清除定時器
    clearInterval(timer);
});
focus.addEventListener('mouseleave', function() {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    // 鼠標離開, 重新開啓定時器
    timer = setInterval(function() {
        // 手動調用arrow_r的點擊事件
        arrow_r.click();
    }, 2000);
});
// 3. 動態生成小圓圈  有幾張圖片，我就生成幾個小圓圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
// console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
    // 創建一個小li 
    var li = document.createElement('li');
    // 記錄當前小圓圈的索引號 通過自定義屬性來做 
    li.setAttribute('index', i);
    // 把小li插入到ol 裏面
    ol.appendChild(li);
    // 4. 小圓圈的排他思想 我們可以直接在生成小圓圈的同時直接綁定點擊事件
    li.addEventListener('click', function() {
        // 幹掉所有人 把所有的小li 清除 current 類名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下我自己  當前的小li 設置current 類名
        this.className = 'current';
        // 5. 點擊小圓圈，移動圖片 當然移動的是 ul 
        // ul 的移動距離 小圓圈的索引號 乘以 圖片的寬度 注意是負值
        // 當我們點擊了某個小li 就拿到當前小li 的索引號
        var index = this.getAttribute('index');
        // 當我們點擊了某個小li 就要把這個li 的索引號給 num  
        num = index;
        // 當我們點擊了某個小li 就要把這個li 的索引號給 circle  
        circle = index;
        animate(ul, -index * focusWidth);
    })
}
// 把ol裏面的第一個小li設置類名爲 current
ol.children[0].className = 'current';
// 6-動態克隆第一張圖片, 追加到ul的最後
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);

// 用來記錄當前顯示圖片的索引: num代表的是要顯示當前圖片, ul需要向左偏移幾張圖片的寬度
var num = 0;
// 7-點擊右側按鈕, ul向左切換一張圖片
// 記錄小圓圈的索引號
var circle = 0;
// 節流閥
var flag = true;
arrow_r.addEventListener('click', function() {
    if (flag) {
        flag = false;
        // 當到達最後一張圖片的時候
        if (num == ul.children.length - 1) {
            // 立馬將ul.style.left設置爲0, 也就是顯示第一張圖片
            ul.style.left = 0;
            // 將圖片索引重置爲0
            num = 0;
        }
        num++
        animate(ul, -num * focusWidth, function() {
            flag = true;
        });
        // 8-小圓圈跟隨高亮顯示
        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }
        // 調用circleChange點亮小圓點
        circleChange();
    }

});
// 9. 左側按鈕做法
arrow_l.addEventListener('click', function() {
    if (flag) {
        flag = false;
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';

        }
        num--;
        animate(ul, -num * focusWidth, function() {
            flag = true;
        });
        // 點擊左側按鈕，小圓圈跟隨一起變化 可以再聲明一個變量控制小圓圈的播放
        circle--;
        // 如果circle < 0  說明第一張圖片，則小圓圈要改爲第4個小圓圈（3）
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        // 調用circleChange點亮小圓點
        circleChange();
    }

});


function circleChange() {
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
    }
    ol.children[circle].className = 'current';
}

// 10-自動播放
var timer = setInterval(function() {
    // 手動調用arrow_r的點擊事件
    arrow_r.click();
}, 2000);})

js原生輪播圖

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結