jQuery实现轮播效果(一) - 基础

版权声明:本文为博主原创文章,欢迎大家各种转载,转载请注明出处! https://blog.csdn.net/qq791967024/article/details/47403283

前戏:


         XXXX年XX月XX日,经理交给我一个网站新闻资讯网页开发的活儿,我一个java程序员,怎么完成得了网页设计这样高端的活儿呢!之前虽然有学过一点HTML,CSS的知识,但是在实际的使用中,把页面整的好看很困难,最后信心没了,就再也不想去做涉及网页开发的事儿了,一心学习java。如果在小公司做java web开发,专门做后台的开发时很少的,一般还得弄前台页面(PS:做这些前台也很简单,要么用一些前端框架,要么就是把以前的项目拷过来再修改下页面)。拿到网页开发这个活儿,我顿时愣了,不过好在不用我去设计页面,只要把美工做好的模板拿过来再进行一下排版就OK了,只写代码当然难不住作为程序员的我啦!于是啪啦啪啦的去写代码了,突然发现,咦,这是个什么玩意?每隔一段时间就会显示下一张新闻图片,问了下美工,他说这是一个叫“轮播”的东东,只觉得这个东西好神奇,美工说你去网上找一下做轮播效果的代码,然后改改就行啦~百度了一下,发现搜索到的结果特别多,而且大部分都是用jquery写的,于是随便找到一个效果拿过去用了,效果确实令人满意。

         拿过来改下确实能解决事儿,但是我已经对无脑的复制粘贴感到厌烦了,这终究不是个办法,我不仅要知道他确实能实现这种效果,而且也要了解它到底是怎样工作的(据我观察,公司的一些程序员的一些代码都是复制粘贴过来的,你去看里面的一些代码就会觉得很凌乱,有时代码出问题了,你去问他,他居然不知道!当然我这里不是为了黑大伙,仅仅只是复制代码不会对我们技术的提升有任何效果)。于是根据自己的一些理解,提供了这篇jquery轮播效果的讲解,如果文中有什么疏漏,还奢望指教。


正文:


      首先看一下效果:

     

     轮播效果分析:

  1. 轮播效果大致可以分为3个部分:轮播图片(图片或者是包含容器),控制轮播图显示的按钮(向左、向右按钮,索引按钮(例如上面效果图的顶部的数字按钮)),每隔一段时间轮流显示轮播图片。
  2. 轮播图的显示:要显示的轮播图显示,不需要显示的轮播图隐藏;通常将这些轮播图片以定位的方式重叠在一起,每次显示一张轮播图片。
  3. 控制按钮:鼠标点击或者移到索引按钮上面时,显示对应索引位置的轮播图;向上、向下按钮负责控制显示上一张、下一张轮播图片。
  4. 其它:一般索引按钮有激活状态和未激活状态共2种状态;鼠标移到轮播图片上面时应该停止自动轮播,鼠标离开时开始自动轮播。

   轮播效果实现笔记:

  1. jquery提供了丰富的选择器以及用来挑选元素的方法,这极大的简化了我们的开发,例如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引按钮。
  2. 两张轮播图的切换显示效果是通过jquery的fadeOut()和fadeIn()方法来实现的,具体的使用参照jquery的api;
  3. CSS透明背景的实现:  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); (可以参看下面的参看资料),兼容大部分主流浏览器包括IE;为什么不使用opacity呢?因为opacity会使文字也透明(子元素也会透明)。
  4. HTML骨架很重要,你写的html的结果应该是良好的。

    代码部分:


-----------------------------------------------------------------------------------

    HTML:

<pre name="code" class="html"><div class="slider">
	<ul class="slider-main">
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>
		</li>
	</ul>
	<div class="slider-extra">
		<ul class="slider-nav">
			<li class="slider-item">1</li>
			<li class="slider-item">2</li>
			<li class="slider-item">3</li>
			<li class="slider-item">4</li>
		</ul>
		<div class="slider-page">
			<a class="slider-pre" href="javascript:;;"><</a>
			<a class="slider-next" href="javascript:;;">></a>
		</div>
	</div>
</div>


   CSS:

* {
	padding: 0px;
	margin: 0px;
}
a {
	text-decoration: none;
}
ul {
	list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
	width: 650px;
	height: 413px;
}
.slider {
	text-align: center;
	margin: 30px auto;
	position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
	position: absolute;
	z-index: 8;
}
.slider-panel {
	position: absolute;
}
.slider-panel img {
	border: none;
}
.slider-extra {
	position: relative;
}
.slider-nav {
	margin-left: -51px;
	position: absolute;
	left: 50%;
	bottom: 4px;
}
.slider-nav li {
	background: #3e3e3e;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	margin: 0 2px;
	overflow: hidden;
	text-align: center;
	display: inline-block;
	height: 18px;
	line-height: 18px;
	width: 18px;
}
.slider-nav .slider-item-selected {
	background: blue;
}
.slider-page a{
	background: rgba(0, 0, 0, 0.2);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
	color: #fff;
	text-align: center;
	display: block;
	font-family: "simsun";
	font-size: 22px;
	width: 28px;
	height: 62px;
	line-height: 62px;
	margin-top: -31px;
	position: absolute;
	top: 50%;
}
.slider-page a:HOVER {
	background: rgba(0, 0, 0, 0.4);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
	left: 100%;
	margin-left: -28px;
}

   JavaScript:

$(document).ready(function() {
	var length,
		currentIndex = 0,
		interval,
		hasStarted = false, //是否已经开始轮播
		t = 3000; //轮播时间间隔
	length = $('.slider-panel').length;
	
	//将除了第一张图片隐藏
	$('.slider-panel:not(:first)').hide();
	//将第一个slider-item设为激活状态
	$('.slider-item:first').addClass('slider-item-selected');
	//隐藏向前、向后翻按钮
	$('.slider-page').hide();
	
	//鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动
	$('.slider-panel, .slider-pre, .slider-next').hover(function() {
		stop();
		$('.slider-page').show();
	}, function() {
		$('.slider-page').hide();
		start();
	});
	
	$('.slider-item').hover(function(e) {
		stop();
		var preIndex = $(".slider-item").filter(".slider-item-selected").index();
		currentIndex = $(this).index();
		play(preIndex, currentIndex);
	}, function() {
		start();
	});
	
	$('.slider-pre').unbind('click');
	$('.slider-pre').bind('click', function() {
		pre();
	});
	$('.slider-next').unbind('click');
	$('.slider-next').bind('click', function() {
		next();
	});
	
	/**
	 * 向前翻页
	 */
	function pre() {
		var preIndex = currentIndex;
		currentIndex = (--currentIndex + length) % length;
		play(preIndex, currentIndex);
	}
	/**
	 * 向后翻页
	 */
	function next() {
		var preIndex = currentIndex;
		currentIndex = ++currentIndex % length;
		play(preIndex, currentIndex);
	}
	/**
	 * 从preIndex页翻到currentIndex页
	 * preIndex 整数,翻页的起始页
	 * currentIndex 整数,翻到的那页
	 */
	function play(preIndex, currentIndex) {
		$('.slider-panel').eq(preIndex).fadeOut(500)
			.parent().children().eq(currentIndex).fadeIn(1000);
		$('.slider-item').removeClass('slider-item-selected');
		$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
	}
	
	/**
	 * 开始轮播
	 */
	function start() {
		if(!hasStarted) {
			hasStarted = true;
			interval = setInterval(next, t);
		}
	}
	/**
	 * 停止轮播
	 */
	function stop() {
		clearInterval(interval);
		hasStarted = false;
	}
	
	//开始轮播
	start();
});

         首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前、向后按钮,使第一个索引按钮处于激活状态。

         事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、

         轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播。

上面的js写的比较散,结构也不太好,读起来也比较费力,也不易使用,耦合度较高。下篇将给出一个纯粹的jquery轮播插件, 该插件可以定制各种效果,方便的配置以及可扩展。

-----------------------------------------------------------------------------------


下面是整体的代码:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
	* {
		padding: 0px;
		margin: 0px;
	}
	a {
		text-decoration: none;
	}
	ul {
		list-style: outside none none;
	}
	.slider, .slider-panel img, .slider-extra {
		width: 650px;
		height: 413px;
	}
	.slider {
		text-align: center;
		margin: 30px auto;
		position: relative;
	}
	.slider-panel, .slider-nav, .slider-pre, .slider-next {
		position: absolute;
		z-index: 8;
	}
	.slider-panel {
		position: absolute;
	}
	.slider-panel img {
		border: none;
	}
	.slider-extra {
		position: relative;
	}
	.slider-nav {
		margin-left: -51px;
		position: absolute;
		left: 50%;
		bottom: 4px;
	}
	.slider-nav li {
		background: #3e3e3e;
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
		margin: 0 2px;
		overflow: hidden;
		text-align: center;
		display: inline-block;
		height: 18px;
		line-height: 18px;
		width: 18px;
	}
	.slider-nav .slider-item-selected {
		background: blue;
	}
	.slider-page a{
		background: rgba(0, 0, 0, 0.2);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
		color: #fff;
		text-align: center;
		display: block;
		font-family: "simsun";
		font-size: 22px;
		width: 28px;
		height: 62px;
		line-height: 62px;
		margin-top: -31px;
		position: absolute;
		top: 50%;
	}
	.slider-page a:HOVER {
		background: rgba(0, 0, 0, 0.4);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
	}
	.slider-next {
		left: 100%;
		margin-left: -28px;
	}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		var length,
			currentIndex = 0,
			interval,
			hasStarted = false, //是否已经开始轮播
			t = 3000; //轮播时间间隔
		length = $('.slider-panel').length;
		
		//将除了第一张图片隐藏
		$('.slider-panel:not(:first)').hide();
		//将第一个slider-item设为激活状态
		$('.slider-item:first').addClass('slider-item-selected');
		//隐藏向前、向后翻按钮
		$('.slider-page').hide();
		
		//鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动
		$('.slider-panel, .slider-pre, .slider-next').hover(function() {
			stop();
			$('.slider-page').show();
		}, function() {
			$('.slider-page').hide();
			start();
		});
		
		$('.slider-item').hover(function(e) {
			stop();
			var preIndex = $(".slider-item").filter(".slider-item-selected").index();
			currentIndex = $(this).index();
			play(preIndex, currentIndex);
		}, function() {
			start();
		});
		
		$('.slider-pre').unbind('click');
		$('.slider-pre').bind('click', function() {
			pre();
		});
		$('.slider-next').unbind('click');
		$('.slider-next').bind('click', function() {
			next();
		});
		
		/**
		 * 向前翻页
		 */
		function pre() {
			var preIndex = currentIndex;
			currentIndex = (--currentIndex + length) % length;
			play(preIndex, currentIndex);
		}
		/**
		 * 向后翻页
		 */
		function next() {
			var preIndex = currentIndex;
			currentIndex = ++currentIndex % length;
			play(preIndex, currentIndex);
		}
		/**
		 * 从preIndex页翻到currentIndex页
		 * preIndex 整数,翻页的起始页
		 * currentIndex 整数,翻到的那页
		 */
		function play(preIndex, currentIndex) {
			$('.slider-panel').eq(preIndex).fadeOut(500)
				.parent().children().eq(currentIndex).fadeIn(1000);
			$('.slider-item').removeClass('slider-item-selected');
			$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
		}
		
		/**
		 * 开始轮播
		 */
		function start() {
			if(!hasStarted) {
				hasStarted = true;
				interval = setInterval(next, t);
			}
		}
		/**
		 * 停止轮播
		 */
		function stop() {
			clearInterval(interval);
			hasStarted = false;
		}
		
		//开始轮播
		start();
	});
</script>
</head>
<body>
	<div class="slider">
		<ul class="slider-main">
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>
			</li>
		</ul>
		<div class="slider-extra">
			<ul class="slider-nav">
				<li class="slider-item">1</li>
				<li class="slider-item">2</li>
				<li class="slider-item">3</li>
				<li class="slider-item">4</li>
			</ul>
			<div class="slider-page">
				<a class="slider-pre" href="javascript:;;"><</a>
				<a class="slider-next" href="javascript:;;">></a>
			</div>
		</div>
	</div>
</body>
</html>

至此一个简单的jquery轮播效果就完成了,当然还有很多需要改进的地方。

本篇文章的源代码可以在如下几个地址下载:

  • CSDN下载点击这里 (http://download.csdn.net/detail/qq791967024/8993769)
  • GitHub下载点击这里(https://github.com/ricciozhang/zslider_simple)

参考资料:

  1. IE8下实现兼容rgba(透明效果)

  2. jquery官方api
  3. CSS3 opacity 属性

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭