jquery 实现的轮播图效果

jquery实现轮播图特效

ps:很基本的特效,供大家学习，本人菜鸟，不足之处请指教，也给自己做个笔记。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<script src="../../js/jquery.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.out{border: 1px solid red;
			width: 640px;
			height: 1138px;
			/*相对于正常位置进行定位*/
			position: relative;
			margin: 30px auto;
			overflow: hidden;
		}
		.out ul{
			/*相对于正常位置进行定位，正常位置就是div的左上角*/
			position: relative;
			z-index: 1;
		}
		.out ul li{
			/*相对于static以外的第一个父元素进行定位，即相当于ul进行定位*/
			position: absolute;
			left: 0;
			top: 0;
		}
		.out ol{
			z-index: 2;
			/*相对于static以外的第一个父元素进行定位  相对于div进行定位*/
			position: absolute;
			right: 240px;
			bottom: 20px;
		}
		.out ol li{
			width: 20px;
			height: 30px;
			line-height: 30px;
			background-color: black;
			color: #fff;
			text-align: center;
			float: left;
			margin-left: 10px;
			cursor: pointer;
			border-radius: 60%;
		}
		.out ol li.active{
			background-color: red;
		}
		.out .btn{
			position:absolute;
			top:50%;
			width: 20px;
			height: 40px;
			margin-top: -30px;
			background-color: aliceblue;
			color:black;
			text-align: center;
			line-height: 40px;
			font-size: 20px;
			z-index: 2;
		}
		.out .left{
			left: 0;
		}
		.out .right{
			right: 0;
		}
		.out:hover .btn{
			display: block;
			color:white;
			font-weight: 900;
			background-color: black;
			opacity: 0.8;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="out">
		<ul>
			<li><img src="../../images/1.jpg"></li>
			<li><img src="../../images/2.jpg"></li>
			<li><img src="../../images/3.jpg"></li>
			<li><img src="../../images/4.jpg"></li>
			<li><img src="../../images/5.jpg"></li>
		</ul>
		<ol>
			<!-- <li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li> -->
		</ol>
		<button class="left btn"><</button>
		<button class="right btn">></button>
	</div>
</body>
<script>
	$(function(){
		var num = 6;
		// 取得图片的数量
		var size = $("ul li").size();
		for(var i = 1; i <= size; i++){
			var li = "<li>"+i+"</li>";
			$("ol").append(li);
		}

		// 处理数字列表的样式
		// 给数字列表的第一的标签添加属性
		$("ol li").eq(0).addClass("active");

		// 当鼠标移动到某个元素时，添加事件
		$("ol li").mouseover(function(){
			$(this).addClass("active").siblings().removeClass("active");
			// 获取到此元素的索引值
			var index = $(this).index();

			// 将其索引值赋给一个全局变量
			i = index;
			$("ul li").eq(index).css('left','640px');
			num++;
			$("ul li").eq(index).css('z-index',num);
			$("ul li").eq(index).animate({left:'0'},500);
		});
		i = -1;

		// 向右移动的函数
		function moveRight(){
			i++;
			if(i == size){
				i = 0;
			}
			$("ol li").eq(i).addClass("active").siblings().removeClass("active");
			$("ul li").eq(i).css('left','640px');
			num++;
			$("ul li").eq(i).css('z-index',num);
			$("ul li").eq(i).animate({left:'0'},500);

		}
		function moveLeft(){
			i--;
			if(i == -1){
				i = size-1;
			}
			$("ol li").eq(i).addClass("active").siblings().removeClass("active");
			$("ul li").eq(i).css('left','-640px');
			num++;
			$("ul li").eq(i).css('z-index',num);
			$("ul li").eq(i).animate({left:'0'},500);
		}
		var t = setInterval(moveRight,1500);

		// 悬浮至div上时，停止切换图片
		$(".out").hover(function(){
			clearInterval(t);
		},function(){
			t = setInterval(moveRight,1500);
		});

		// 左按钮添加事件
		$(".out .right").click(function(){
			moveRight();
		});
		// 右按钮添加事件
		$(".out .left").click(function(){
			moveLeft();
		});
	})
</script>
</html>

网页的静态页面如下：

使用jquery实现的动态效果为：

网页图片进行轮播，当鼠标移到图片上时，轮播暂停，轮播进行切换图片采用从右到左进行切换，点击左右按钮也可以进行图片的切换，鼠标悬浮在数字上进行 图片的切换。