jquery 背景图片幻灯片

最新推荐文章于 2018-07-14 22:13:54 发布

andyliu

最新推荐文章于 2018-07-14 22:13:54 发布

阅读量1.8k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/liushuai_andy/article/details/8587833

版权

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

参考了几个博客，经过了多次修改，终于可以见人了。

废话不多说先上源码

<html>
	<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
	.content-top {width: auto;min-width: 950px;height:380px;}
	.headerimg { width:100%;height:380px;background-position: center top;background-repeat: no-repeat; position:absolute; }
	#headerimg1 { background-image:url("./nature.jpg"); float:left; display:block;z-index:-1;}
	#headerimg2 { background-image:url("./work.jpg");float:left;display:block; clear:both;z-index:-2;display:none;}
	#headernav-outer {height:30px;width:200px;position: relative;	z-index: 1;left:34%;top:85%;}
	#headernav{height: 100%;}
	.btn { height:28px;width:28px; float:left; cursor:pointer;}
	#prev { background:url(./icon.png) 0px 0px  no-repeat;}
	#next { background:url(./icon.png) -28px 0px  no-repeat;}
	.control {width:20px;margin:5px 5px 0px 0px;height:16px;background:url(./icon.png) -55px -0px no-repeat;}
	.control:hover {background:url(./icon.png) -55px -19px no-repeat;}
</style>
</head>
<body>
<!-- jQuery句柄，用于放置头部背景图片 -->
<div class="content-top">
	<div id="headerimg1" class="headerimg"></div>
	<div id="headerimg2" class="headerimg"></div>

	
	<!-- 幻灯片控制器 -->
	<div id="headernav-outer">
		<div id="headernav">
			<div id="prev" class="btn"></div>
			<div id="next" class="btn"></div>
		</div>
	</div>
</div>
<script type="text/javascript" charset="utf-8">
/*
 * @ author andy (andyliu.me)
 *
 */
	var slides = {
		// 背景图片地址
		urls : [
			'./biking.jpg',
			'./food.jpg',
			'./nature.jpg',
			'./vacation.jpg'
		],

		// 默认配置
		conf : {
			'animating'			: false, // 动画是否在运行
			'direction'			: 'next', // 图片播放顺序
			'currentZindex'		: -1, // 当前图片的z-index
			'activeContainer'	: 1, // 需要显示的div
			'slideshowSpeed'	: 6000 // 播放速度
		},

		// 开始播放背景幻灯片
		start : function(opts) {
			// 同步配置		
			$.extend( slides.conf , opts );
			
			// 由于下面这些都是固定的不能让用户自己修改所以放在这里
			slides.conf.htmlBgIdPrefix	= 'headerimg'; // 背景div的class
			slides.conf.interval		= ''; // setInterval产生的id
			slides.conf.currentImg		= 0; // 当前图片id
			slides.conf.controlClass	= 'control'; // 控制器中间直接显示某个背景的div 的class
			slides.conf.prevId			= 'prev'; // 上一个按钮的id
			slides.conf.nextId			= 'next'; // 下一个按钮的id
			
			// 生成图片指针
			for(var i = 0;i<slides.urls.length;i++) {
				if(i == 0) {
					var style = 'background:url(./icon.png) -55px -19px no-repeat;';
				}else {
					var style = '';
				}
				//$('<div>' , {class:'btn ' + slides.conf.controlClass , data_a:i , style:style}).insertBefore( "#" + slides.conf.nextId ); // 此处由于class是保留字  所以会报错 所以还是用下面的方式
				
				$("<div style=\""+ style +"\" class=\"btn "+slides.conf.controlClass+"\"  data_a=\""+i+"\"></div>").insertBefore("#next");
			}
			
			slides.init();
			slides.startAnimation();
		},

		// 初始化添加按钮事件以
		init : function() {
			$( "#" + slides.conf.prevId ).click(function() {
				slides.stopAnimation();
				slides.prev();
			});
			$( "#" + slides.conf.nextId ).click(function() {
				slides.stopAnimation();
				slides.next();
			});
			$("." + slides.conf.controlClass).bind('click',function(){
				slides.stopAnimation();
				slides.control($(this).attr('data_a'));
			});
			$("." + slides.conf.controlClass).bind('mousemove',function(){
					
				$(this).css('backgrund-position','-55px -19px');
			});	
		},

		// 上一张幻灯片
		prev : function() {
			slides.control("prev");
		},

		// 下一张幻灯片
		next : function() {
			slides.control("next");
		},

		// 显示当前选择的幻灯片
		current : function(num) {
			slides.control(num);
		},

		// 幻灯片显示控制器
		control : function(direction) {
			// 选择要显示的图片
			if(direction == "next") {
				slides.conf.currentImg++;
				slides.conf.currentImg = slides.searchImg( slides.conf.currentImg , slides.urls.length );
			}else if(direction == 'prev') {
				slides.conf.currentImg--;
				slides.conf.currentImg = slides.searchImg( slides.conf.currentImg , slides.urls.length);
			}else {
				slides.conf.currentImg = direction;
			}
			
			// Check which container we need to use
			var currentContainer = slides.conf.activeContainer;
			if(slides.conf.activeContainer == 1) {
				slides.conf.activeContainer = 2;
			} else {
				slides.conf.activeContainer = 1;
			}
			
			// 当前图片指针位置高亮
			$("#headernav ." + slides.conf.controlClass).css('background', 'url(./icon.png) -55px -0px no-repeat');
			$($("#headernav ." + slides.conf.controlClass).get(slides.conf.currentImg)).css('background', 'url(./icon.png) -55px -19px no-repeat');

			// 切换图片
			slides.showImage(slides.urls[slides.conf.currentImg], currentContainer, slides.conf.activeContainer);
		
		},

		// 背景图显示
		showImage : function(photoObject, currentContainer, activeContainer) {
			slides.conf.animating = true;
		
			// 使容器的显示层级总是最低的
			slides.conf.currentZindex--;
			
			// 替换需要展示的容器图片
			$("#" + slides.conf.htmlBgIdPrefix + slides.conf.activeContainer).css({
				"background-image" : "url(" + photoObject + ")",
				"display" : "block",
				"z-index" : slides.conf.currentZindex
			});
			
			// 使上一个显示图片的容器慢慢消失
			$("#" + slides.conf.htmlBgIdPrefix + currentContainer).fadeOut();
		},

		// 搜索应该显示的北京图片
		searchImg : function( current , total ) {
			if(current == total) {
				current = 0;
			}else if(current == -1) {
				current = total-1;
			}
			
			return current;		
		},

		// 停止动画
		stopAnimation : function() {
			// Clear the interval
			clearInterval(slides.conf.interval);
			slides.conf.animating = false;
		},

		// 开始动画
		startAnimation : function() {
			slides.conf.animating = true;
			slides.conf.interval = setInterval(function() {
				slides.control("next");
			}, slides.conf.slideshowSpeed);		   
				   
		}
	}
slides.start({prevId:'aaa'});
</script>
</body>
</html>

在线演示

andyliu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
jquery 背景图片幻灯片

参考了几个博客，经过了多次修改，终于可以见人了。废话不多说先上源码 .content-top {width: auto;min-width: 950px;height:380px;} .headerimg { width:100%;height:380px;background-position: center top;background-repeat: no-repea
复制链接

扫一扫