原理：使用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">&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);

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

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

轉載于:https://www.cnblogs.com/zczhangcui/p/6194351.html

總結

以上是生活随笔為你收集整理的滑动轮播图实现最后一张图片无缝衔接第一张图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。