原理：使用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({ 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', 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", (imgwidth-(imgnum-1)*3)/imgnum+"px", lineHeight:liheight+'px', verticalAlign:'middle' }); $infobox.find('a').css({ display: 'inline-block', $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({ 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'}); });