jQuery圆形横向图片轮播图切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery圆形横向图片轮播图切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title>jQuery圆形横向图片轮播图切换 </title>
<!-- Load modernizr or html5shiv -->
<script src="lib/modernizr/modernizr-custom.js"></script>
<!--<script src="../lib/html5shiv/html5shiv.js"></script>-->
<!-- Load jQuery -->
<script src="lib/jquery/jquery.js"></script>
<!-- Load miSlider -->
<link href="css/mislider.css" rel="stylesheet">
<link href="css/mislider-skin-cameo.css" rel="stylesheet">
<script src="js/mislider.js"></script>
<script>
	jQuery(function ($) {
		var slider = $('.mis-stage').miSlider({
			//  The height of the stage in px. Options: false or positive integer. false = height is calculated using maximum slide heights. Default: false
			stageHeight: 380,
			//  Number of slides visible at one time. Options: false or positive integer. false = Fit as many as possible.  Default: 1
			slidesOnStage: false,
			//  The location of the current slide on the stage. Options: 'left', 'right', 'center'. Defualt: 'left'
			slidePosition: 'center',
			//  The slide to start on. Options: 'beg', 'mid', 'end' or slide number starting at 1 - '1','2','3', etc. Defualt: 'beg'
			slideStart: 'mid',
			//  The relative percentage scaling factor of the current slide - other slides are scaled down. Options: positive number 100 or higher. 100 = No scaling. Defualt: 100
			slideScaling: 150,
			//  The vertical offset of the slide center as a percentage of slide height. Options:  positive or negative number. Neg value = up. Pos value = down. 0 = No offset. Default: 0
			offsetV: -5,
			//  Center slide contents vertically - Boolean. Default: false
			centerV: true,
			//  Opacity of the prev and next button navigation when not transitioning. Options: Number between 0 and 1. 0 (transparent) - 1 (opaque). Default: .5
			navButtonsOpacity: 1
		});
	});
</script>
<!-- Apply other styles -->
<link href='http://fonts.useso.com/css?family=Roboto+Condensed:400|Roboto:500' rel='stylesheet'>
<link href="css/styles.css" rel="stylesheet">

</head>
<body>
<div id="wrapper">
<figure>
<div class="mis-stage">
	<!-- The element to select and apply miSlider to - the class is optional -->
	<ol class="mis-slider">
		<!-- The slider element - the class is optional -->
		<li class="mis-slide">
			<!-- A slide element - the class is optional -->
			<a href="#" class="mis-container">
				<!-- A slide container - this element is optional, if absent the plugin adds it automatically -->
				<figure>
					<!-- Slide content - whatever you want -->
					<img src="images/garden01.jpg" alt="Pink Water Lillies">
					<figcaption>Pink Water Lillies</figcaption>
				</figure>
			</a>
		</li>
		<li class="mis-slide">
			<a href="#" class="mis-container">
				<figure>
					<img src="images/garden02.jpg" alt="Pond with Lillies">
					<figcaption>Pond with Lillies</figcaption>
				</figure>
			</a>
		</li>
		<li class="mis-slide">
			<a href="#" class="mis-container">
				<figure>
					<img src="images/garden03.jpg" alt="Hidden Pond">
					<figcaption>Hidden Pond</figcaption>
				</figure>
			</a>
		</li>
		<li class="mis-slide">
			<a href="#" class="mis-container">
				<figure>
					<img src="images/garden04.jpg" alt="Shrine">
					<figcaption>Shrine</figcaption>
				</figure>
			</a>
		</li>
		<li class="mis-slide">
			<a href="#" class="mis-container">
				<figure>
					<img src="images/garden05.jpg" alt="White Water Lillies">
					<figcaption>White Water Lillies</figcaption>
				</figure>
			</a>
		</li>
		<li class="mis-slide">
			<a href="#" class="mis-container">
				<figure>
					<img src="images/garden06.jpg" alt="Garden Walkway">
					<figcaption>Garden Walkway</figcaption>
				</figure>
			</a>
		</li>
		<li class="mis-slide">
			<a href="#" class="mis-container">
				<figure>
					<img src="images/garden07.jpg" alt="Lilly with Bee">
					<figcaption>Lilly with Bee</figcaption>
				</figure>
			</a>
		</li>
	</ol>
</div>
</div>
</body>
</html>

JS代码(mislider.min.js):

/*! miSlider 2015-04-21 version:0.1.11 */
/* https://github.com/jbowyers/mislider.git */
!function(a,b,c,d){
	"use strict";
	var e=function(c,e){
	function f(a){
	var b=j.slideWidth*a*-1,c=b;
	return"center"===j.options.slidePosition?c=b+d.floor(j.slidesOnStage/2)*j.slideWidth:"right"===j.options.slidePosition&&(c=b+(j.slidesOnStage-1)*j.slideWidth),c}
function g(a,b){
	var c=a.children().first().outerHeight(),d=0;
	return c>j.stageHeight&&(d=(j.stageHeight-c)/2),a.data(b,d),d}
function h(a){
	return a=(a%j.slidesLengthOrig+j.slidesLengthOrig)%j.slidesLengthOrig}
function i(a){
	var b=!1;
	if("undefined"!=typeof Modernizr)Modernizr.csstransforms&&(b=!0);
	else{
	var c=a.style;
	("undefined"!=typeof c.transform||"undefined"!=typeof c.WebkitTransform||"undefined"!=typeof c.msTransform)&&(b=!0)}
return b}
var j=this;
	return j.optionsInit={
	speed:700,pause:4e3,increment:1,stageHeight:!1,slidesOnStage:1,slidesContinuous:!0,slidePosition:"left",slideStart:"beg",slideWidth:!1,slideScaling:100,offsetV:0,centerV:!1,navList:!0,navButtons:!0,navButtonsShow:!1,navButtonsOpacity:.5,randomize:!1,slidesLoaded:!1,beforeTrans:!1,afterTrans:!1,classStage:"mis-stage",classSlider:"mis-slider",classSlide:"mis-slide",classNavButtons:"mis-nav-buttons",classNavList:"mis-nav-list",selectorSlider:"ol",selectorSlide:"li"}
,j.options={
}
,j.stage=!1,j.slider=!1,j.slides=!1,j.navButtons=!1,j.prev=!1,j.next=!1,j.navList=!1,j.navListItems=!1,j.slideCurrent=!1,j.animatedElements=a(),j.stageWidth=0,j.stageHeight=0,j.sliderWidth=0,j.slideWidth=0,j.slideWidthCurrent=0,j.slideScaling=j.optionsInit.slideScaling,j.scalingWidth=0,j.scalingMargin=0,j.offsetV=j.optionsInit.offsetV,j.slidesLengthOrig=0,j.slidesLength=0,j.indexCurrent=0,j.indexFirst=0,j.indexLast=0,j.increment=j.optionsInit.increment,j.slidesOnStage=j.optionsInit.slidesOnStage,j.speed=j.optionsInit.speed,j.navButtonsOpacity=j.optionsInit.navButtonsOpacity,j.navButtonsFade=!1,j.slidesContinuous=j.optionsInit.slidesContinuous,j.pause=j.optionsInit.pause,j.timer=!1,j.resizeTimer=!1,j.after=!1,j.classSlideClone="mis-clone",j.classSlideContainer="mis-container",j.classCurrent="mis-current",j.classPrev="mis-prev",j.classNext="mis-next",j.init=function(c,e){
	return j.options=a.extend({
}
,j.optionsInit,e),j.stage=a(c),j.stage.fadeTo(0,0),j.slider=j.stage.children(j.options.selectorSlider).first(),j.slides=j.slider.children(j.options.selectorSlide),j.slidesLengthOrig=j.slides.length,j.animatedElements=j.animatedElements.add(j.slider).add(j.slides),j.indexCurrent="beg"===String(j.options.slideStart)?0:"mid"===String(j.options.slideStart)?d.ceil(j.slidesLengthOrig/2)-1:"end"===String(j.options.slideStart)?j.slidesLengthOrig-1:a.isNumeric(j.options.slideStart)&&parseInt(j.options.slideStart,10)<=j.slidesLengthOrig&&parseInt(j.options.slideStart,10)>0?parseInt(j.options.slideStart,10)-1:0,j.options.randomize&&j.randomize(),j.stage.hasClass(j.options.classStage)||j.stage.addClass(j.options.classStage),j.slider.hasClass(j.options.classSlider)||j.slider.addClass(j.options.classSlider),j.options.speed&&a.isNumeric(j.options.speed)&&(j.speed=d.abs(parseInt(j.options.speed,10))),j.options.pause===!1?j.pause=!1:a.isNumeric(j.options.pause)&&(j.pause=d.abs(parseInt(j.options.pause,10))),a.isNumeric(j.options.offsetV)&&(j.offsetV=Number(j.options.offsetV)),a.isNumeric(j.options.navButtonsOpacity)&&Number(j.options.navButtonsOpacity)>=0&&Number(j.options.navButtonsOpacity)<=1&&(j.navButtonsOpacity=Number(j.options.navButtonsOpacity)),a.isNumeric(j.options.slideScaling)&&Number(j.options.slideScaling)>=100&&(j.slideScaling=Number(j.options.slideScaling)),i(c)||(j.slideScaling=100),j.optionsInit.slideScaling=j.slideScaling,a.isNumeric(j.options.increment)&&0!==parseInt(j.options.increment,10)&&(j.increment=parseInt(j.options.increment,10),j.optionsInit.increment=j.increment),j.options.navButtons&&(j.addNavButtons(j.stage),j.animatedElements=j.animatedElements.add(j.navButtons),j.options.navButtonsShow||(j.navButtonsFade=!0)),j.options.navList&&j.addNavList(),j.setup(),j.slidesOnStage>1&&j.slider.on("click",j.options.selectorSlide,function(b){
	a(this).index()!==j.indexCurrent&&(b.preventDefault(),j.autoplayOff(),j.transition(a(this).index(),!1,j.autoplayOn(j.increment)))}
),(j.pause!==!1||j.navButtonsFade)&&j.stage.on({
	mouseenter:function(){
	if(j.pause!==!1&&j.autoplayOff(),j.navButtonsFade)if(j.animatedElements.is(":animated"))if(a.isFunction(j.after)){
	var b=j.after;
	j.after=function(){
	b(),j.navButtons.fadeTo(400,j.navButtonsOpacity)}
}
else j.after=function(){
	j.navButtons.fadeTo(400,j.navButtonsOpacity)}
;
	else j.navButtons.fadeTo(400,j.navButtonsOpacity)}
,mouseleave:function(){
	j.pause!==!1&&j.autoplayOn(j.increment),j.navButtonsFade&&j.navButtons.fadeTo(100,0)}
}
),a(b).on({
	load:function(){
	j.slideSetup(),j.updateNavButtons(),j.stage.fadeTo(600,1),j.autoplayOn(j.increment),a.isFunction(j.options.slidesLoaded)&&j.options.slidesLoaded()}
,resize:function(){
	j.autoplayOff(),clearTimeout(j.resizeTimer),j.resizeTimer=setTimeout(j.resetSlider,500)}
}
),this}
,j.setup=function(){
	var b,c,e;
	return j.slidesLength=j.slidesLengthOrig,j.indexLast=j.slidesLength-1,j.slides.each(function(){
	var b,c,d=a(this);
	d.hasClass(j.options.classSlide)||d.addClass(j.options.classSlide),d.children().hasClass(j.classSlideContainer)||d.wrapInner("<div class='"+j.classSlideContainer+"'></div>"),b=d.outerWidth(),c=d.outerHeight(),b>j.slideWidthCurrent&&(j.slideWidthCurrent=b),c>j.stageHeight&&(j.stageHeight=c)}
),a.isNumeric(j.options.slideWidth)&&parseInt(j.options.slideWidth,10)>0&&(j.slideWidthCurrent=parseInt(j.options.slideWidth,10)),a.isNumeric(j.options.stageHeight)&&parseInt(j.options.stageHeight,10)>0&&(j.stageHeight=parseInt(j.options.stageHeight,10)),j.indexCurrent=h(j.indexCurrent),j.stage.css({
	height:j.stageHeight}
),j.stageWidth=j.stage.outerWidth(),b=d.floor((j.stageWidth-j.slideWidthCurrent)/(100*j.slideWidthCurrent/j.slideScaling))+1,b=1>b?1:b,j.slidesOnStage=b,a.isNumeric(j.options.slidesOnStage)&&parseInt(j.options.slidesOnStage,10)>=1&&parseInt(j.options.slidesOnStage,10)<=b&&(j.slidesOnStage=parseInt(j.options.slidesOnStage,10)),"center"===j.options.slidePosition&&(j.slidesOnStage=2*d.ceil(j.slidesOnStage/2)-1),c=(j.increment+j.slidesOnStage)/2,c>j.slidesOnStage?j.increment=j.slidesOnStage:0>c&&(j.increment=-j.slidesOnStage),j.slidesOnStage>1?(j.slideWidth=(j.stageWidth-j.slideWidthCurrent)/(j.slidesOnStage-1),j.slideWidthCurrent<j.slideWidth&&!j.options.slideWidth&&(j.slideWidth=j.stageWidth/j.slidesOnStage,j.slideWidthCurrent=j.slideWidth)):(j.slideWidth=j.stageWidth,j.slideWidthCurrent=j.slideWidth,j.slideScaling=100),j.scalingWidth=j.slideWidth*j.slideScaling/100,j.scalingMargin=(j.slideWidth-j.scalingWidth)/2,e=j.slidesLengthOrig-j.slidesOnStage,e>=0&&j.options.slidesContinuous?(j.slidesContinuous=!0,j.slidesToClone=j.slidesOnStage+d.abs(j.increment)-1,j.slides.slice(j.slidesLength-j.slidesToClone).clone().addClass(j.classSlideClone).removeAttr("id").prependTo(j.slider).find("*").removeAttr("id"),j.slides.slice(0,j.slidesToClone).clone().addClass(j.classSlideClone).removeAttr("id").appendTo(j.slider).find("*").removeAttr("id"),j.indexFirst=j.slidesToClone,j.indexLast=j.slidesLength+j.slidesToClone-1,j.indexCurrent=j.indexCurrent+j.slidesToClone,j.slides=j.slider.children(j.options.selectorSlide),j.slidesLength=j.slides.length):j.slidesContinuous=!1,j.slideCurrent=j.slides.eq(j.indexCurrent),j.sliderWidth=j.slideWidthCurrent+j.slideWidth*(j.slidesLength-1)+1,j.slider.css({
	left:f(j.indexCurrent),width:j.sliderWidth}
),j.updateNavList(j.indexCurrent),this}
,j.transition=function(b,c,d,e){
	if(!j.animatedElements.is(":animated")&&b!==j.indexCurrent){
	var g,i=b,k=j.indexCurrent;
	if(j.slidesContinuous?(b<j.indexFirst?i=b+j.slidesLengthOrig:b>j.indexLast&&(i=b-j.slidesLengthOrig),i!==b&&(k=j.indexCurrent+j.slidesLengthOrig,b>i&&(k=j.indexCurrent-j.slidesLengthOrig))):i=h(b),g=h(i)-h(k)){
	var l;
	if(a.isFunction(c)&&c(),a.isFunction(j.options.beforeTrans)&&j.options.beforeTrans(),l=function(){
	a.isFunction(d)&&d(),a.isFunction(j.options.afterTrans)&&j.options.afterTrans(),a.isFunction(j.after)&&(j.after(),j.after=!1)}
,j.slidesContinuous&&k!==j.indexCurrent){
	var m=j.slides.eq(k);
	100!==j.slideScaling&&(m.css({
	transform:"scale(1)",width:j.slideWidthCurrent,marginLeft:"0",marginRight:"0",borderSpacing:"100px"}
),j.options.centerV&&m.children().first().css({
	marginTop:m.data("slideMarginTopCurrent")}
)),m.addClass(j.classCurrent).siblings().removeClass(j.classCurrent),j.slider.css("left",f(k)),100!==j.slideScaling&&(j.slideCurrent.css({
	transform:"scale("+100/j.slideScaling+")",width:j.scalingWidth,marginLeft:j.scalingMargin,marginRight:j.scalingMargin,borderSpacing:j.slideScaling}
),j.options.centerV&&j.slideCurrent.children().first().css({
	marginTop:j.slideCurrent.data("slideMarginTop")}
)),j.indexCurrent=k,j.slideCurrent=j.slides.eq(j.indexCurrent)}
j.navButtons?j.navButtons.fadeTo(100,e?j.navButtonsOpacity:0,function(){
	j.navButtons.fadeTo(100,0,function(){
	j.animateSlides(i,function(){
	j.stage.find(":hover").length||j.options.navButtonsShow?j.navButtons.fadeTo(400,j.navButtonsOpacity,l):l()}
)}
)}
):j.animateSlides(i,l)}
}
return this}
,j.animateSlides=function(b,c){
	j.slideCurrent.removeClass(j.classCurrent);
	var d=j.slides.eq(b);
	return 100!==j.slideScaling&&(d.animate({
	marginLeft:"0",marginRight:"0",width:j.slideWidthCurrent}
,{
	duration:j.speed,queue:!1}
).animate({
	borderSpacing:"100px"}
,{
	step:function(b){
	a(this).css({
	transform:"scale("+100/b+")"}
)}
,duration:j.speed,queue:!1}
),j.slideCurrent.animate({
	marginLeft:j.scalingMargin,marginRight:j.scalingMargin,width:j.scalingWidth}
,{
	duration:j.speed,queue:!1}
).animate({
	borderSpacing:j.slideScaling}
,{
	step:function(b){
	a(this).css({
	transform:"scale("+100/b+")"}
)}
,duration:j.speed,queue:!1}
),j.options.centerV&&(d.children().first().animate({
	marginTop:d.data("slideMarginTopCurrent")}
,{
	duration:j.speed,queue:!1}
),j.slideCurrent.children().first().animate({
	marginTop:j.slideCurrent.data("slideMarginTop")}
,{
	duration:j.speed,queue:!1}
))),j.slider.animate({
	left:f(b)}
,{
	duration:j.speed,queue:!1,complete:function(){
	j.indexCurrent=b,j.slideCurrent=d,j.updateNavList(b),j.slideCurrent.addClass(j.classCurrent).siblings().removeClass(j.classCurrent),a.isFunction(c)&&c()}
}
),this}
,j.autoplayOn=function(a){
	return j.pause!==!1&&(clearInterval(j.timer),j.stage.find(":hover").length||(j.timer=setInterval(function(){
	j.animatedElements.is(":animated")||j.transition(j.indexCurrent+a)}
,j.pause))),this}
,j.autoplayOff=function(){
	return clearInterval(j.timer),this}
,j.addNavButtons=function(b){
	var c,e=a(b);
	return c=a("<div class='"+j.options.classNavButtons+"'><a href='#' class='"+j.classPrev+"'>Prev</a><a href='#' class='"+j.classNext+"'>Next</a></div>"),c.css({
	opacity:j.options.navButtonsShow?j.navButtonsOpacity:0}
).children("a").on("click",function(a){
	a.preventDefault(),this.className===j.classPrev?(j.autoplayOff(),j.transition(j.indexCurrent-d.abs(j.increment),!1,j.autoplayOn(j.increment),!0)):this.className===j.classNext&&(j.autoplayOff(),j.transition(j.indexCurrent+d.abs(j.increment),!1,j.autoplayOn(j.increment),!0))}
),e.append(c),j.navButtons=e.find("."+j.options.classNavButtons),j.prev=j.navButtons.find("."+j.classPrev),j.next=j.navButtons.find("."+j.classNext),this}
,j.updateNavButtons=function(){
	j.navButtons&&j.navButtons.css({
	width:j.slideWidthCurrent,left:j.slideCurrent.offset().left-j.stage.offset().left}
).children("a").css({
	height:j.stageHeight,paddingTop:(50+j.offsetV)*j.stageHeight/100}
)}
,j.addNavList=function(){
	var b,c="<ol class='"+j.options.classNavList+"'>";
	return j.slides.each(function(b){
	var d,e=b+1;
	d=a(this).find(":header").sort(function(b,c){
	var d=a(b).prop("tagName"),e=a(c).prop("tagName");
	return parseInt(d.match(/\d+/),10)-parseInt(e.match(/\d+/),10)}
).eq(0).html(),d?e=d:(d=a(this).find("figcaption").eq(0).html(),d?e=d:(d=a(this).find("img").eq(0).attr("title"),d&&(e=d))),c+="<li><a href='#' title='"+e+"'>"+e+"</a></li>"}
),c+="</ol>",b=a(c).on("click","li",function(b){
	b.preventDefault(),a(this).index()!==j.indexCurrent-j.indexFirst&&(j.autoplayOff(),j.transition(a(this).index()+j.indexFirst,!1,j.autoplayOn(j.increment)))}
),j.stage.prepend(b),j.navList=j.stage.children().first(),j.navListItems=j.navList.children("li"),this}
,j.updateNavList=function(a){
	j.navListItems.length&&j.navListItems.eq(a-j.indexFirst).addClass(j.classCurrent).siblings().removeClass(j.classCurrent)}
,j.randomize=function(){
	return j.slides.sort(function(){
	return.5-d.random()}
),j.slides.detach().appendTo(j.slider),this}
,j.resetSlider=function(){
	if(j.animatedElements.is(":animated"))if(a.isFunction(j.after)){
	var b=j.after;
	j.after=function(){
	b(),j.resetSlider()}
}
else j.after=j.resetSlider;
	else j.autoplayOff(),j.stage.removeAttr("style"),j.slider.removeAttr("style"),j.slides.removeAttr("style"),j.slides.filter("."+j.classSlideClone).remove(),j.slides=j.slider.children(j.options.selectorSlide),j.stageHeight=0,j.slideWidthCurrent=0,j.slideScaling=j.optionsInit.slideScaling,j.indexCurrent-=j.slidesToClone,j.indexFirst=0,j.increment=j.optionsInit.increment,j.after=!1,j.setup(),j.slideSetup(),j.updateNavButtons(),j.autoplayOn(j.increment);
	return this}
,j.slideSetup=function(){
	j.slides.each(function(b){
	var c=a(this);
	c.css({
	"transform-origin":"50% "+String(50+j.offsetV)+"%",width:j.slideWidthCurrent}
),j.options.centerV&&g(c,"slideMarginTopCurrent"),c.css({
	width:j.scalingWidth}
),100!==j.slideScaling&&c.css({
	marginLeft:j.scalingMargin,marginRight:j.scalingMargin,transform:"scale("+100/j.slideScaling+")",borderSpacing:j.slideScaling}
),j.options.centerV&&c.children().first().css({
	marginTop:g(c,"slideMarginTop")}
),b===j.indexCurrent&&(c.css({
	borderSpacing:"100px",width:j.slideWidthCurrent,marginLeft:0,marginRight:0,transform:"scale(1)"}
).addClass(j.classCurrent).siblings().removeClass(j.classCurrent),j.options.centerV&&c.children().first().css({
	marginTop:g(c,"slideMarginTopCurrent")}
))}
)}
,j.init(c,e),this}
;
	a.fn.miSlider=function(b){
	return this.each(function(){
	var c=a(this);
	c.data("miSlider")||c.data("miSlider",new e(this,b))}
)}
}
(jQuery,window,document,Math);
	//# sourceMappingURL=mislider.min.js.map

CSS代码(styles.css):

/* Other styles for making things look pretty ==================== */
/* Fontsfont-family:'Roboto Condensed',sans-serif;font-family:'Roboto',sans-serif;*/
figure,body{margin:0;padding:0;line-height:1.4;}
body{font-family:'Roboto',sans-serif;background-color:#eee;}
.demo{background-color:#666;}
h1,h2,h3{font-family:'Roboto Condensed',sans-serif;font-weight:400;letter-spacing:1px;}
h1{font-size:24px;}
h1,#wrapper > figure > figcaption{text-align:center;}
#wrapper > figure > figcaption{margin:1em;}
.demo h1,.demo #wrapper > figure > figcaption{color:#fff;}
.mis-slider li figcaption{font-weight:500;letter-spacing:.5px;}
.main{width:80%;margin:2em auto;/*display:block;*/
}
div.main pre{font-size:1.1em;overflow:auto;max-height:500px;background-color:#fff;padding:0 1em 1em;}
@media screen and (min-width:1200px){.main{width:50%;}
}

附件:下载该文件资源,减少时间成本(增值服务)