实现一个水平切换的幻灯片

本部分是临摹网上的例子供学习用，也算不容易总结一下用到的知识点：1. 如何扩展jquery，制作插件 2. js中的定时控制以及取消定时 3.基于jquery标签生成 4.基于juqery的标签事件

<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="slideshow.js"></script>
</head>
<body>
    <div id="container">
    </div>
    <script>
        var pictures = [];
        for (var i = 1; i < 10; i++) {
            pictures.push('img/' + i + '.jpg');
        }
        var opt = {
            /*width*/
            Width: 130,
            /*height*/
            Height: 90,
            /*count of shows*/
            countOfShow: 3,
            /*timeInterval*/
            timeInterval: 3000,
            /*pictures*/
            pictures: pictures
        };//将要传递的参数定义
        $('#container').slide(opt);//我们将要扩展的方法
</script>
</body>

(function($) {
    $.extend($.fn, {//fn类似于命名空间
        slide:function(opt) {
            var picWidth=opt.Width,
            picHeight = opt.Height,
            pictures = opt.pictures,
            picLength = pictures.length,
            countOfShow = opt.countOfShow||2,
            interval=opt.timeInterval||3000;
            var $div = $('<div id="picFrame">').css('float', 'left')
            .css('overflow', 'hidden').css('white-space', 'nowrap').css('margin', '0 10px'); //定义图框样式
//通过jquery生成标签，以及对标签属性的设定
            $(pictures).each(function(idx, url) {
                if (idx != 0) {
                    $('<img>').attr('src', url).css('margin-left','10px').css('cursor', 'pointer').appendTo($div);
                } else {
                    $('<img>').attr('src', url).css('cursor', 'pointer').appendTo($div);
                }
            });
//jquery访问数组元素
            var leftArrow = $('<img style="float:left;top:15px;" src="img/left.png">'),
            rightArrow =$('<img style="float:left;top:15px;" src="img/right.png">');
//通过jquery生成标签，以及对标签属性的设定
            $div.height(picHeight+5).width(picWidth*countOfShow+10*countOfShow-1);

            $('<div>').append(leftArrow).append($div).append(rightArrow).appendTo(this); /*有先后顺序；*/

            var unit = picWidth+ 10;
            var timerInterval, timerTimeout;
            rightArrow.css('opacity', 0.5);
            rightArrow.css('cursor', '');
--------------------------------------------------------------------------------------
            function goLeft() {
                console.log('Lb:' + $div[0].scrollLeft);
                if ($div[0].scrollLeft == (picLength - countOfShow) * unit) {
                    leftArrow.css('opacity', 0.5);
                    leftArrow.css('cursor', '');/*设置按钮失效*/
                }
                $div[0].scrollLeft += unit;
                console.log('La:' + $div[0].scrollLeft);
                rightArrow.css('opacity', '');
                rightArrow.css('cursor', 'pointer');
            }

            function goRight() {
                console.log('goRight' + $div[0].scrollLeft);
                if ($div[0].scrollLeft <= 0) {
                    rightArrow.css('opacity', 0.5);
                    rightArrow.css('cursor', '');/*设置按钮失效*/
                }
                $div[0].scrollLeft -= unit;
                console.log('goRight' + $div[0].scrollLeft);
                leftArrow.css('opacity', '');
                leftArrow.css('cursor', 'pointer');
            }
----------------------------------------------------------
 /*左右箭头图标*/
            leftArrow.click(function() {
                goLeft();
                stopAutoPlay();
            });

            rightArrow.click(function() {
                goRight();
                stopAutoPlay();
            });
            /*end*/
            $div.mouseover(function () {
                clearInterval(timerInterval);//清除事件
            });
            $div.mouseout(autoPlay);

            function autoPlay() {
                if (interval) {
                    clearInterval(timerInterval);
                }
                timerInterval = setInterval(function() {
                    if ($div[0].scrollLeft ==831) {
                          $div[0].scrollLeft = 0;
                          return;
                    }//如果第一幅图片已经到最右端，则还原初始位置

                    goLeft();
                }, interval);
            }
            function stopAutoPlay() {
                clearInterval(timerInterval);
//                if (timerTimeout) {
//                    clearTimeout(timerTimeout);
//                }
                //timerTimeout = setTimeout(autoPlay, interval);
            }

            autoPlay();
        }

});
})(jQuery);