jQuery图片循环轮播代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片循环轮播效果</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
(function($) {
	$.fn.loopedSlider = function(options) {
	var defaults = {			
		container: '.container',
		slides: '.slides',
		pagination: '.pagination',
		containerClick: true, 
		autoStart: 0, 
		slidespeed: 300, 
		fadespeed: 300, 
		autoHeight: false 
	};
	this.each(function() {
		var obj = $(this);
		var o = $.extend(defaults, options);
		var pagination = $(o.pagination+' li a',obj);
		var m = 0;
		var t = 1;
		var s = $(o.slides,obj).children().size();
		var w = $(o.slides,obj).children().outerWidth();
		var p = 0;
		var u = false;
		var n = 0;
		$(o.slides,obj).css({width:(s*w)});
		$(o.slides,obj).children().each(function(){
			$(this).css({position:'absolute',left:p,display:'block'});
			p=p+w;
		});
		$(pagination,obj).each(function(){
			n=n+1;
			$(this).attr('rel',n);
			$(pagination.eq(0),obj).parent().addClass('active');
		});
		$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
		if(o.autoHeight){autoHeight(t);}
		$('.next',obj).click(function(){
			if(u===false) {
				animate('next',true);
				if(o.autoStart){clearInterval(sliderIntervalID);}
			} return false;
		});
		$('.previous',obj).click(function(){
			if(u===false) {	
				animate('prev',true);
				if(o.autoStart){clearInterval(sliderIntervalID);}
			} return false;
		});
		if (o.containerClick) {
			$(o.container ,obj).click(function(){
				if(u===false) {
					animate('next',true);
					if(o.autoStart){clearInterval(sliderIntervalID);}
				} return false;
			});
		}
		$(pagination,obj).click(function(){
			if ($(this).parent().hasClass('active')) {return false;}
			else {
				t = $(this).attr('rel');
				$(pagination,obj).parent().siblings().removeClass('active');
				$(this).parent().addClass('active');
				animate('fade',t);
				if(o.autoStart){clearInterval(sliderIntervalID);}
			} return false;
		});
		if (o.autoStart) {
			sliderIntervalID = setInterval(function(){
				if(u===false) {animate('next',true);}
			}, o.autoStart);
		}
		function current(t) {
			if(t===s+1){t=1;}
			if(t===0){t=s;}
			$(pagination,obj).parent().siblings().removeClass('active');
			$(pagination+'[rel="' + (t) + '"]',obj).parent().addClass('active');
		};
		function autoHeight(t) {
			if(t===s+1){t=1;}
			if(t===0){t=s;}	
			var getHeight = $(o.slides,obj).children(':eq('+(t-1)+')',obj).outerHeight();
			$(o.container,obj).animate({height: getHeight},o.autoHeight);					
		};		
		function animate(dir,clicked){	
			u = true;	
			switch(dir){
				case 'next':
					t = t+1;
					m = (-(t*w-w));
					current(t);
					if(o.autoHeight){autoHeight(t);}
					$(o.slides,obj).animate({left: m}, o.slidespeed,function(){
						if (t===s+1) {
							t = 1;
							$(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});							
							$(o.slides,obj).children(':eq(0)').css({left: 0});
							$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});				
						}
						if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
						if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
						u = false;
					});					
					break; 
				case 'prev':
					t = t-1;
					m = (-(t*w-w));
					current(t);
					if(o.autoHeight){autoHeight(t);}
					$(o.slides,obj).animate({left: m}, o.slidespeed,function(){
						if (t===0) {
							t = s;
							$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
							$(o.slides,obj).css({left: -(s*w-w)});
							$(o.slides,obj).children(':eq(0)').css({left:(s*w)});
						}
						if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
						if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
						u = false;
					});
					break;
				case 'fade':
					t = [t]*1;
					m = (-(t*w-w));
					current(t);
					if(o.autoHeight){autoHeight(t);}
					$(o.slides,obj).children().fadeOut(o.fadespeed, function(){
						$(o.slides,obj).css({left: m});
						$(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
						$(o.slides,obj).children(':eq(0)').css({left:0});
						if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
						if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});}
						$(o.slides,obj).children().fadeIn(o.fadespeed);
						u = false;
					});
					break; 
				default:
					break;
				}					
			};
		});
	};
})(jQuery);
</script>
<style type="text/css" media="screen">
.container { width:600px; height:393px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:600px; display:none; }
#loopedSlider,#newsSlider { margin:0 auto; width:500px; position:relative; clear:both; }
ul.pagination { list-style:none; padding:0; margin:0; }
ul.pagination li  { float:left; }
ul.pagination li a { padding:2px 4px; }
ul.pagination li.active a { background:blue; color:white; }
</style>
</head>
<body>
<div id="loopedSlider">	
	<div class="container">
		<div class="slides">
		<div><img src="//ku.shouce.ren/files/images/201601/56a34a1c9caec.jpg" width="600" height="393" alt="First Image" /></div>
		<div><img src="//ku.shouce.ren/files/images/201601/56a34a1d31cfa.jpg" width="600" height="393" alt="Second Image" /></div>
		<div><img src="//ku.shouce.ren/files/images/201601/56a34a1ed05a6.jpg" width="600" height="393" alt="Third Image" /></div>
		</div>
	</div>
	<a href="#" class="previous">previous</a>
	<a href="#" class="next">next</a>
	<ul class="pagination">
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
	</ul>	
</div>
<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider();
	});
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery图片循环轮播代码

分类

图片代码

描述

一个比较简易的图片切换代码，使用了jQuery插件来完成，在切换的时候加入了淡入淡出效果，点击左下角的小数字即可控制图片切换，jQuery版本为1.6.2，其它版本也可以。懂JS的可在此基础上添加缩略图和图片标题功能。