滑动轮播图实现最后一张图片无缝衔接第一张图片

原理：使用insertBefore和insertAfter方法调整图片顺序。

测试：firefox/chrome/IE11正常

已知不足：每次播放均使用了一次insertBefore和insertAfter，可考虑在最后一张图的时候将前几张图片整体后移。以后有空再优化。

1、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>

2、CSS

为方便轮播组件复用，大部分CSS样式包含在了jq组件中，所以在CSS中只需设置outerbox容器的高度和宽度。

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

3、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){$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的divvar infobox=$("
");$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){lists+="
";}var ullists=$("
"+lists+"
");$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){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=$('
<
>
');$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){$innerbox.find('a:first').insertAfter($innerbox.find('a:last'));}}else if(index-dataidx<0){for(i=0;i){$innerbox.find('a:last').insertBefore($innerbox.find('a:first'));}}});return this;}});
})(jQuery);

4、引入jq和该插件，并设置outerbox的宽度和高度，便可以实现滑动循环切换的轮播效果。

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