预约挂号系统之首页广告轮播图

轮播图设计

<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