輪播圖練習

css

       *{margin: 0;padding: 0;}
        /* 顯示區域 */
        #slideImg{margin: 50px auto;position: relative;border: 1px solid #333;height: 350px;width: 300px;}
            /* 大圖區域的左右按鈕 */
            #slideImg #left{position: absolute;height: 250px;width: 150px;left: 0;}
            #slideImg #leftBtn{position: absolute;height: 40px;width: 40px;left: 0;top: 50%;margin-top: -60px;background: rgba(22, 22, 22, .5);opacity: 0;}
            
            #slideImg #right{position: absolute;height: 250px;width: 150px;right: 0;}
            #slideImg #rightBtn{position: absolute;height: 40px;width: 40px;margin-top: -60px;right: 0;top: 50%;background: rgba(22, 22, 22, .5);opacity: 0;}
            /* 大圖 */
            #slideImg #bigImg{height: 250px;width: 300px;}
                #slideImg #bigImg img{display: block;width: 300px; height: 250px;}
            /* 底部小圖 */
            #slideImg #smallImg{height: 100px;width: 300px;position: relative;overflow: hidden;}
                #slideImg #smallImg #ul{position: absolute;width: 800px;left: -100px;}
                    #slideImg #smallImg #ul img{display: block;height: 100px;width: 100px;padding: 5px;box-sizing: border-box;float: left;cursor: pointer;opacity: .5;}

html

    <div id="slideImg">
        <div id="left"></div>
        <div id="right"></div>
        <div id="leftBtn"></div>
        <div id="rightBtn"></div>
        <div id="bigImg">
            <img src="" alt="">
        </div>
        <div id="smallImg">
            <div id="ul">
                <img class="img" src="../img/1.jpg" alt="">
                <img class="img" src="../img/2.jpg" alt="">
                <img class="img" src="../img/3.jpg" alt="">
                <img class="img" src="../img/4.jpg" alt="">
            </div>
        </div>
    </div>

javascript

    function $(el){
        return document.getElementById(el);
    }
    var slideImg = $('slideImg');
    var bigImg = $('bigImg');
    var leftBtn = $('leftBtn');
    var rightBtn = $('rightBtn');
    var left = $('left');
    var right = $('right');
    var smallImg = $('smallImg');
    var autoTimer;
    var ul = $('ul');//小圖的容器，用來移動全部的小圖的left來實現滑動效果。
    var sImg = document.getElementsByClassName('img');//獲取全部小圖的對象的對象集
    var bImg = bigImg.firstElementChild;//獲取大圖的對象。
    var curImg = 2;//當前顯示圖片的下標，由於前面添加了兩張圖片，最後面添加了兩張圖片，因此本來第一張圖片的下標就變成了2.
    window.onload = function(){
        //建立圖像，調用函數
        img();
        smallImgClick();
        autoSlide();//自動輪播
        slideImgMouseOver();
        slideImgMouseOut();
        //設置大圖的默認圖像和默認小圖像的透明性爲1.
        bImg.src = '../img' + sImg[curImg].src.slice(sImg[curImg].src.lastIndexOf('/'));
        sImg[curImg].style.opacity = 1;
    }
    
    //自動輪播
    function autoSlide(){
        autoTimer = setInterval(function(){
            curImg++;
            slideTo();
        },4000)
    }
    //當鼠標進入輪播圖的時候，中止自動播放，移出的時候，進行自動播放。
    function slideImgMouseOver(){
        addEvent(slideImg,'mouseover',function(){
            clearInterval(autoTimer);
        })
    }
    function slideImgMouseOut(){
        addEvent(slideImg,'mouseout',function(){
            autoSlide();//自動輪播
        })
    }
    //點擊圖像滑動圖片，
    function smallImgClick(){
        for(var i = 0;i < sImg.length; i++){
            sImg[i].index = i;
            addEvent(sImg[i],'click',function(){
                curImg = this.index;
                slideTo(); }) } }
    //圖像滑動核心函數
    function slideTo(){ if(curImg == 1){
            curImg = 6;
            ul.style.left = -curImg * 100 + 100 + 'px';
            curImg--;
        }
        if(curImg == 6){
            curImg = 1;
            ul.style.left = -curImg * 100 + 100 + 'px';
            curImg++;
        }
        bImg.src = '../img' + sImg[curImg].src.slice(sImg[curImg].src.lastIndexOf('/'));
        var elPro = {'left':-curImg * 100 + 100} animateEl(ul,elPro);
        //遍歷全部的小圖片，讓他們的透明性爲.5，當前下標圖片透明性爲1
        for(var i = 0; i < sImg.length; i++){ animateEl(sImg[i],{'opacity':.5}); } animateEl(sImg[curImg],{'opacity':1}); }
    //建立全部圖像，並將圖像添加到ul元素中，
    function img(){ var firstImg = document.querySelector('#smallImg img:first-of-type');
        var firstImgClone = firstImg.cloneNode();
        var secondImg = document.querySelector('#smallImg img:nth-of-type(2)');
        var secondImgClone = secondImg.cloneNode();
        var lastImg = document.querySelector('#smallImg img:last-of-type');
        var lastImgClone = lastImg.cloneNode();
        var thirdImg = document.querySelector('#smallImg img:nth-of-type(3)');
        var thirdImgClone = thirdImg.cloneNode();
        ul.appendChild(firstImgClone);
        ul.appendChild(secondImgClone);
        ul.insertBefore(lastImgClone,firstImg);
        var topImg = document.querySelector('#smallImg img:first-of-type'); ul.insertBefore(thirdImgClone,topImg); }
    //鼠標點擊按鈕滑動圖片。
    addEvent(leftBtn,'click',function(){ curImg--; slideTo(); }) addEvent(rightBtn,'click',function(){ curImg++; slideTo(); })
    
    //鼠標進入大圖的左區域左按鈕出現，右區域，右按鈕出現。
    left.onmouseover = leftBtn.onmouseover = function(){
        animateEl(leftBtn,{'opacity':1});
    }
    left.onmouseout = leftBtn.onmouseout = function(){
        animateEl(leftBtn,{'opacity':0});
    }
    right.onmouseover = rightBtn.onmouseover = function(){
        animateEl(rightBtn,{'opacity':1});
    }
    right.onmouseout = rightBtn.onmouseout = function(){
        animateEl(rightBtn,{'opacity':0}); }  
    //兼容ie6,7,8的事件處理
    function addEvent(obj,evt,fun){ if(obj.addEventListener){ obj.addEventListener(evt,fun); }else{ obj.attachEvent("on"+evt,fun); } }
    //封裝特效核心函數
    function getStyle(el,property){//ie8兼容性
        return el.currentStyle ? el.currentStyle[property] :window.getComputedStyle(el)[property]; } function animateEl(el,properties,fn){ clearInterval(el.timer); el.timer = setInterval(function() {//設定週期調用函數
           var stop = true;//設置是否獲得的屬性都匹配了設定的值，則返回true for(var property in properties){//遍歷對象中的鍵名
                var curpro; var target = properties[property];
                if(property == "opacity"){
                    curpro = Math.round(parseFloat(getStyle(el,property)) * 100);//將值乘以100取整，方便計算speed
                    target = parseFloat(target)*100;
                }else{
                    curpro = parseFloat(getStyle(el,property));//width若是使用parseInt,不會獲得指定值，其餘能夠
                }
                var speed = (target - curpro) / 30;//目標距離減去當前距離除以30做爲速度。
                speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);//若是速度大於0，則向上取整，至少爲1,相反爲-1；
                if(properties[property] != curpro){//若是這個值沒有達到指定值，則設定stop爲false，不讓定時器中止。
                    stop = false;
                }
                if(property == "opacity"){
                    el.style[property] =(curpro + speed)/100 ;
                }else{
                    el.style[property] =curpro + speed + "px";
                }
            }
            if(stop){//若是一個值匹配了指定值，則中止定時器
                clearInterval(el.timer);
                fn && fn();//由於中止了第一個定時器，須要開啓下一次運算，用回調函數來決定。這個意思是你返回一個函數，則調用這個函數。
            }
        }, 20);
    }