原理：使用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<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的divvar 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"><</div><div class="rightarrow arrow">></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);
4、引入jq和该插件，并设置outerbox的宽度和高度，便可以实现滑动循环切换的轮播效果。
$(function(){$(".box").slideShow({color:'red'}); });
