全屏背景轮播 – 霖博客

觉得Web前端也挺好玩的，一直想写WordPress主题，但是自己CSS太渣了。先学学基础的东西吧。看慕课网的视频( http://www.imooc.com/learn/18，http://www.imooc.com/learn/445 )参考他的代码写了个全屏背景的轮播~

演示：https://youthlin.com/demo/banner/

首先是HTML的结构，这样：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-2.1.4.min.js"></script>
	<script>
		jQuery(document).ready(function($){
          //代码
          })
	</script>
	<link rel="stylesheet" href="a.css">
</head>
<body>
	<header id="site-nav">
		<nav>
			<ul>
				<li><a href="#">链接1</a></li>
				<li><a href="#">链接2</a></li>
				<li><a href="#">链接3</a></li>
				<li><a href="#">链接4</a></li>
			</ul>
		</nav>
	</header>
	<div id="banner">
			<div id="inner">
				<div class="on content" data-imgsrc="img/banner.jpg">
					<h1><a href="#">1Lorem ipsum dolor sit amet, consectetur.</a></h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias doloribus praesentium officiis at similique, laborum nemo est amet consequatur, molestias quibusdam aliquam ab illum rerum quod. Similique vel nulla velit.</p></div>
				<div class="content" data-imgsrc="img/pic01.jpg">
					<h1>2.</h1>
					<p>2</p></div>
				<div class="content" data-imgsrc="img/pic02.jpg">
					<h1>3.</h1>
					<p>3.</p></div>
				<div class="content" data-imgsrc="img/pic03.jpg">
					<h1>4.</h1>
					<p>4.</p></div>
			</div>
			<div id="buttons">
				<span class="on"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:;" class="arrow" id="prev">&nbsp;</a>
			<a href="javascript:;" class="arrow" id="next">&nbsp;</a>
	</div>
	<div id="main-content">
		 <article>Lorem ipsum</article>
           <article>Lorem ipsum</article>
           <article>Lorem ipsum</article>
	</div>
	<footer></footer>
</body>
</html>

然后是CSS，从上到下按照顺序写的，都是参照上面两个链接的视频写的，不过那个按钮组里的按钮我改成了方的，圆的不好看(-｡-;)
设置背景图拉伸：background-size: cover;
自定义鼠标样式：cursor: url('img/prev.ico'),pointer;

*{
	margin: 0;padding: 0;
}
#banner{
	background: url(img/banner.jpg) center no-repeat;
	background-size: cover;
}
header#site-nav{
	height: 100%;
	
}
#site-nav nav ul li{
	display: inline-block;
	line-height: 40px;
	margin: 0;
	padding: 0;
}
#site-nav nav{
	position: fixed;
	width: 100%;
	background: #ccc;
	z-index: 3;
}
#site-nav nav a{
	padding: 0 4px;
	display: inline-block;
	line-height: inherit;
	text-decoration: none;
}
#site-nav nav a:hover{
	background: rgba(0,0,0,0.1);
	color: #4eb;
}
#banner #inner{
	width: 50%;
	position: absolute;
	bottom: 5%;
	left: 25%;
	background: rgba(255,255,255,.6);
}
#banner #inner .content{
	display: none;
}
#banner #inner .on{
	display: block;
}

#buttons { 
	position: absolute;
	z-index: 2; 
	bottom: 2%; 
	left: 45%;
}
#buttons span { 
	cursor: pointer; 
	float: left; 
	border: 1px solid #fff; 
	width: 15px; 
	height: 15px;  
	background: #333; 
	margin: 0 5px;
}
#buttons .on {  
	background: orangered;
}

#banner .arrow {
	display: none;
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	width: 25%;
	height: inherit;
	line-height: inherit;
	position: absolute;
	z-index: 2;
	bottom: 0;
	color: #fff;
	text-decoration: none;
}
#banner:hover .arrow{
	display: block;
	text-decoration: none;
}
#prev{
	left: 0;
	/* http://blog.csdn.net/renfufei/article/details/39339185 
	   http://www.haotu.net/icon/201038/next 
	*/
	cursor: url('img/prev.ico'),pointer;
}
#next{
	cursor: url('img/next.ico'),pointer;
	right: 0;
}

关键的jQuery代码：
首先是使背景全屏：

// 在此网站看到的全屏效果：http://hairproject.ch/fr/
//获取浏览器可视区域高度
$('#banner').height($(window).height());
//浏览器调整窗口时也调整高度
$(window).resize(function(){
	$('#banner').height($(window).height());
})

然后是各个变量的设置：

//各变量
var banner = $('#banner');
var inner = $('#inner');
var buttons = $('#buttons span');
var prev = $('#prev');
var next = $('#next');
var index = 0;
var len = buttons.length;
var interval = 3000;
var timer;

完了后依次按照需要写各个功能，首先切换下一个的效果：

next.bind('click',function(){
	//http://www.w3school.com.cn/jquery/event_bind.asp
	//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
	if(banner.is(':animated'))return;
	//http://www.w3school.com.cn/jquery/selector_animated.asp
	//:animated 选择器选取当前的所有动画元素。
        //如果正在动画则不响应本次点击，直接return

	inner.find('div').eq(index).removeClass('on');
	index++;
	if(index>len-1)index=0;
	animate();
})

因为背景变换在很多个地方都要用，所以写成一个函数animate：

function animate(){
	var img = inner.find('div').eq(index).attr('data-imgsrc');
	//http://www.w3school.com.cn/jquery/attributes_attr.asp
	//attr()获取属性
	//console.log(img);
	banner.fadeTo(500,0.5,function(){
		banner.css('background-image','url('+img+')');
		banner.css('opacity',0.5);
		banner.fadeTo(500,1);
	});
	//http://www.w3school.com.cn/jquery/effect_fadeto.asp
	//fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
	inner.find('div').eq(index).addClass('on');
	showButton();
}

函数showButton作用是高亮显示当前按钮：

function showButton(){
	buttons.eq(index).addClass('on').siblings().removeClass('on');
	//http://www.w3school.com.cn/jquery/traversing_siblings.asp
	//siblings()获取同胞元素，不包括自己
}

再绑定点击上一个的事件：

prev.bind('click',function(){
	if(banner.is(':animated'))return;
	inner.find('div').eq(index).removeClass('on');
	index--;
	if(index<0)index=len-1;
	animate();
})

点击每个按钮的切换：

buttons.each(function(){
	$(this).bind('click',function(){
		if(banner.is(':animated') || index == buttons.index(this))return;
		inner.find('div').eq(index).removeClass('on');
		//获取所点击元素的序号
		//http://bbs.csdn.net/topics/340208277
		index = buttons.index(this);
		//console.log(index);
		animate();
	})
})

还要设置自动播放：

function play() {
    timer = setTimeout(function () {
    //http://www.w3school.com.cn/jsref/met_win_settimeout.asp
    //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    next.trigger('click');
    //http://www.w3school.com.cn/jquery/event_trigger.asp
    //trigger() 方法触发被选元素的指定事件类型。
    play();
    //提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
    }, interval);
}
function stop() {
   clearTimeout(timer);
    //http://www.w3school.com.cn/jsref/met_win_cleartimeout.asp
    //clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
}
inner.hover(stop,play);//覆盖在文字上时暂停动画，移开继续
//.hover(hoverIn,hoverOut)
play();//上面是定义，这里是调用

注释都是我自己查的各个用法，挺好懂的。完整代码可以看Demo的源代码……^_^