滑動輪播圖實現最後一張圖片無縫銜接第一張圖片

原理：使用insertBefore和insertAfter方法調整圖片順序。

測試：firefox/chrome/IE11正常

已知不足：每次播放均使用了一次insertBefore和insertAfter，可考慮在最後一張圖的時候將前幾張圖片總體後移。之後有空再優化。

一、HTML結構

alt的值將做爲圖片的描述信息出如今infobox裏。

<div class="outerbox">
    <div>
        <a href="http://www.baidu.com"><img src="img/img1.jpg" alt="JavaScript高級程序設計"></a>
        <a href="http://www.w3school.com.cn/"><img src="img/img2.jpg" alt="油藏工程原理與方法"></a>
        <a href="http://www.cnblogs.com/zczhangcui/"><img src="img/img3.jpg" alt="高等數學第六版上冊"></a>
        <a href="http://cn.bing.com/"><img src="img/img4.jpg" alt="銀河帝國2：基地與帝國"></a>
        <a href="http://cn.bing.com/academic/?FORM=Z9LH2"><img src="img/img5.jpg" alt="三體"></a>
        <a href="http://cn.bing.com/dict/?FORM=HDRSC6"><img src="img/img6.jpg" alt="計算機科學導論"></a>
    </div>    
</div>

二、CSS

爲方便輪播組件複用，大部分CSS樣式包含在了jq組件中，因此在CSS中只需設置outerbox容器的高度和寬度。

.outerbox{
    height: 500px;
    width: 800px;
}

三、jquery輪播插件。

給每一個圖片設置了data-idx屬性來標識它們，使infobox可以與每一個圖片對應。 

// 定義了DOM對象的slideShow()方法，
// 調用條件：外層容器內部嵌套一個容器，內層容器內放入a標籤包裹的img元素，
// 調用方法：$("外層容器").slideShow(形參)，可傳入0~1個實參，
// 實參說明：一個設定顏色和輪播間隔的對象。形如{color:"#ff7",time:5000}，對象可接受0~2個屬性。
;(function($){
    $.fn.extend({
        "slideShow":function(args){
            //若是傳入一個包含設置參數的對象，那麼覆蓋默認值
            var settings=jQuery.extend({
                color:"#317EF3",
                time:5000
            }, args);

            var i,
                $outerbox=$(this),
                $imgs=$outerbox.find('img'),
                adTimer=null,
                $innerbox=$outerbox.children('div'),
                imgnum=$imgs.length,
                imgwidth=$outerbox.width(),
                imgheight=$outerbox.height();

            //給每一個圖片設置data-idx屬性標識它們，使其可以和infobox相對應
            for(i=0;i<imgnum;i++){
                $imgs.eq(i).attr('data-idx', i);
            }

            //設置各個div的css樣式
            $imgs.css({
                float: 'left',
                border: 'none'
            });
            $outerbox.css({
                overflow: 'hidden',
                position: 'relative'
            });
            $innerbox.css({
                width: imgwidth*imgnum+"px",
                position: 'absolute',
                left:'0',
                top:'0'
            });

            //在outerbox下新增一個顯示alt的div
            var infobox=$("<div class='infobox'></div>");
            $outerbox.append(infobox);
            var $infobox=$outerbox.children('.infobox');
            $infobox.css({
                position: 'absolute',
                left: '0',
                bottom:'0',
                width:imgwidth+10+"px",
                height:'13%'
            });
            var liheight=$infobox.height();

            var lists="";
            for(i=0;i<imgnum;i++){
                lists+="<li><a href=''><span></span></a></li>";
            }
            var ullists=$("<ul>"+lists+"</ul>");
            $infobox.append(ullists);
            $infobox.find('ul').css({
                height: liheight+"px",
                paddingLeft:'0',
                marginTop:'0',
                marginBottom:'0'
            });
            $infobox.find('li').css({
                display: 'inline-block',
                float:'left',
                marginRight:'3px',
                background: "rgba(0,0,0,0.4)",
                height:liheight+"px",
                width:(imgwidth-(imgnum-1)*3)/imgnum+"px",
                lineHeight:liheight+'px',
                verticalAlign:'middle'
            });
            $infobox.find('a').css({
                display: 'inline-block',
                width:$infobox.find('li').width()+"px",
                textAlign:'center'
            });
            $infobox.find('span').css({
                display:'inline-block',
                lineHeight:'1.1em',
                paddingLeft:liheight*0.2+"px",
                paddingRight:liheight*0.2+"px",
                verticalAlign: 'middle',
                color:'#ddd',
                fontSize:'12px',
                wordBreak:'break-all',
                height:'2.2em',
                overflow:'hidden'
            });

            //得到img上層a的href屬性，賦給infobox裏的a元素
            for(i=0;i<imgnum;i++){
                var link=$innerbox.children('a').eq(i).attr("href");
                var info=$innerbox.find('img').eq(i).attr("alt");
                $infobox.find('a').eq(i).attr('href', link);
                if(info){
                    $infobox.find('span').eq(i).append(info);
                }else{
                    $infobox.find('span').eq(i).append(i+1);
                }
            }

            //增長左右箭頭
            var arrows=$('<div class="leftarrow arrow">&lt;</div><div class="rightarrow arrow">&gt;</div>');
            $outerbox.append(arrows);
            var $arrows=$outerbox.children('.arrow');
            $arrows.css({
                width:liheight*0.8+"px",
                height: liheight*1.5+"px",
                position:'absolute',
                top:(imgheight*0.5-liheight*0.75-10)+"px",
                background: "rgba(0,0,0,0.4)",
                textAlign:'center',
                lineHeight:liheight*1.45+'px',
                fontSize:'1.5em',
                color:'#ddd',
                cursor:'pointer'
            });
            $outerbox.children('.leftarrow').css('left', '0');
            $outerbox.children('.rightarrow').css('right', '0');

            //鼠標放在箭頭上時，箭頭變色
            $outerbox.children('.leftarrow').hover(function() {
                $(this).css('background', settings.color);
            }, function() {
                $(this).css('background', 'rgba(0,0,0,0.4)');
            });
            $outerbox.children('.rightarrow').hover(function() {
                $(this).css('background', settings.color);
            }, function() {
                $(this).css('background', 'rgba(0,0,0,0.4)');
            });

            //點擊左右箭頭
            var dataidx;
            $infobox.find('li').eq(0).css('backgroundColor', settings.color).siblings().css('background', 'rgba(0,0,0,0.4)');
            $outerbox.on('click', '.arrow', function(event) {
                if ($(event.target).hasClass('rightarrow')) {
                    if (!$innerbox.is(':animated')) {
                        dataidx=$innerbox.find('a:first').next("a").find('img').attr("data-idx");
                        $infobox.find('li').eq(dataidx).css('backgroundColor', settings.color).siblings().css('background', 'rgba(0,0,0,0.4)');
                        $innerbox.animate({left:-imgwidth}, "normal",function(){
                            $innerbox.find('a:first').insertAfter($innerbox.find('a:last'));
                            $innerbox.css('left', '0');
                        });    
                    }
                }

                if ($(event.target).hasClass('leftarrow')) {
                    if (!$innerbox.is(':animated')) {
                        $innerbox.find('a:last').insertBefore($innerbox.find('a:first'));
                        $innerbox.css('left', -imgwidth);
                        $innerbox.animate({left:0}, "normal");
                        dataidx=$innerbox.find('a:first').find('img').attr("data-idx");
                        $infobox.find('li').eq(dataidx).css('backgroundColor', settings.color).siblings().css('background', 'rgba(0,0,0,0.4)');
                    }
                }
            });

            //自動輪播，鼠標放在div上時箭頭出現，移走箭頭消失
            $outerbox.hover(function() {
                $outerbox.find('.leftarrow').stop().animate({left:"0"},300);
                $outerbox.find('.rightarrow').stop().animate({right:"0"},300);
                $infobox.stop().animate({bottom:"0"}, 300);
                if (adTimer) {
                    clearInterval(adTimer);
                }
            }, function() {
                $outerbox.find('.leftarrow').stop().animate({left:-liheight*0.8+"px"},300);
                $outerbox.find('.rightarrow').stop().animate({right:-liheight*0.8+"px"},300);
                $infobox.stop().animate({bottom:-(liheight-7)+"px"}, 300);
                adTimer=setInterval(function () {
                    $outerbox.find('.rightarrow').trigger('click');
                },settings.time);
            }).trigger('mouseleave');

            //鼠標放在下方的顏色塊上時移動圖片
            $infobox.find('li').mouseover(function() {
                var index=$(this).index();
                var dataidx=$innerbox.find('a:first').find('img').attr("data-idx");
                $infobox.find('li').eq(index).css('backgroundColor', settings.color).siblings().css('background', 'rgba(0,0,0,0.4)');
                if(index-dataidx>0){
                    for(i=0;i<Math.abs(index-dataidx);i++){
                            $innerbox.find('a:first').insertAfter($innerbox.find('a:last'));
                    }
                }else if(index-dataidx<0){
                    for(i=0;i<Math.abs(index-dataidx);i++){
                            $innerbox.find('a:last').insertBefore($innerbox.find('a:first'));
                    }
                }
            });


            return this;
        }
    });
})(jQuery);

四、引入jq和該插件，並設置outerbox的寬度和高度，即可以實現滑動循環切換的輪播效果。

$(function(){
    $(".box").slideShow({color:'red'});
});