輪播圖設計

<div id="main_top_left">
    <div id="list" style="left: -650px;">
        <img src="../img/slideshow_5.jpg" alt="5"/>
        <img src="../img/slideshow_1.jpg" alt="1"/>
        <img src="../img/slideshow_2.jpg" alt="2"/>
        <img src="../img/slideshow_3.jpg" alt="3"
 
/>
        <img src="../img/slideshow_4.jpg" alt="4"/>
        <img src="../img/slideshow_5.jpg" alt="5"/>
        <img src="../img/slideshow_1.jpg" alt="1"/>
    </div>
    <div id="pointsDiv">
        <span index="1" class="on"></span>
        <span index="2"></
 
span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
 

</div>

　　在輪播圖中假設有N張廣告圖，則父div包含N+2張圖，其中在最前面增加最後一張圖，在最後面增加第一張圖，為的是然輪播圖的前後切換感覺像個迴圈，體驗較好，

通過調整父div的left值來確定圖片的位置，通過定時器來產生滑動的效果，jQuery程式碼如下

$(function(){
    var $container = $('#main_top_left');
    var $list = $('#list');
    var $points = $('#pointsDiv>span')
    var $prev = $('#prev');
    var $next = $('#next');
    var PAGE_WIDTH = 650;//圖片寬度
    var TIME=400;// 翻頁總時間
    var ITEM_TIME=20;// 單元移動間隔時間
    var imgCount = $points.length //圖片的數量
    var index = 0 //當前圓點的下標
    var moving = false //是否正在翻頁中

    // 翻到下一頁
    $next.click(function(event) {
        nextPage(true);
    });
    // 翻到上一頁
    $prev.click(function(event) {
        nextPage(false);
    });

    //每隔三秒翻頁
    var intervalId = setInterval(function() {
        nextPage(true);
    },3000);

    //滑鼠放在圖片上時停止定時器，離開時重新開始
    $container.hover(function() {
        clearInterval(intervalId);
    }, function() {
        intervalId = setInterval(function () {
          nextPage(true);
        }, 3000);
    });

    //點選圓點來切頁
    $points.click(function(event) {
        var targetIndex = $(this).index();
        if(targetIndex != index){
            nextPage(targetIndex);
        }
    });



    /*翻頁方法
      設定一個翻頁總時間
      設定一個間隔時間
      TIME/ITEM_TIME=400/20 = 20 相當於0.4秒翻了20次，肉眼看起來像翻頁，其實是圖片不同時間在切換位置（時間都花在了等待上） 

      true ： 向右翻一頁
      false： 向左翻一頁
      數值: 翻到指定頁面
    */
    function nextPage(next) {
        //當前正在翻頁時不執行
        if(moving) {
            return;
        }
        moving = true;//正在翻頁
        //總的偏移量
        var offset = 0;
        if(typeof next === 'boolean') {
            offset = next ? -PAGE_WIDTH : PAGE_WIDTH;
        } else {
            offset = -PAGE_WIDTH * (next - index);
        }
        
        //單元偏移量
        var itemOffset = offset/(TIME/ITEM_TIME);
        //獲取當前的left值
        var currLeft = $list.position().left;
        //計算目標處left值，用於停止定時器
        var targetLeft = currLeft + offset;
        
        var intervalId = setInterval(function() {
            //每次移動後的位置
            currLeft += itemOffset;
            if(currLeft === targetLeft) {
                //清除定時器
                clearInterval(intervalId);
                //翻頁完成
                moving = false;

                //圖片是  5 (1 2 3 4 5) 1 
                //如果翻到第一張，跳到倒數第二張(實際顯示的最後一張圖片)
                if(currLeft === 0) {
                    currLeft = -PAGE_WIDTH * imgCount;
                } else if(currLeft === (-PAGE_WIDTH * (imgCount+1))) {
                    //如果翻到最後一張，跳到第二張(實際顯示的第一張圖片)
                    currLeft = -PAGE_WIDTH;
                }
            }
            $list.css({
                left: currLeft
            });
        }, ITEM_TIME);
        updatePoints(next)
    }

    /*更新圓點位置*/
    function updatePoints(next) {
        var targetIndex = 0;
        if(typeof next === 'boolean') {
            if(next) {
                targetIndex = index + 1;
                if(targetIndex === imgCount) {
                    targetIndex = 0;
                }
            }else {
                targetIndex = index - 1;
                if(targetIndex === -1) {
                    targetIndex = imgCount-1;
                }
            }
        }else {
            targetIndex = next;
        }
        $points[index].className='';
        $points[targetIndex].className='on';
        index = targetIndex;
    }

})

效果如下

完成日期 2018/11/27