Jquery 广告图片轮播切换

要点：

1、鼠标移至图片上出现左右箭头，鼠标移出图片时，左右箭头消失

2、单击左右箭头时，显示上一个/下一个图片，当前数字背景为橙色，其他数字背景为#333333，第一个/最后一个图片显示时，单击箭头时继续显示轮播图片

3、定时1秒换一张图片，轮播出图片，直到最后一张时换第一张轮播，依次类推。

4、鼠标移至图片上，定时就消失；鼠标移出图片，定时就开始轮播图片。

页面效果如上:

adv.html页面

<head lang="en">
		<meta charset="UTF-8">
		<title> 广告图片轮播切换</title>
		<link rel="stylesheet" href="css/adv.css">
	</head>

	<body>
		<div class="adver">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
			<div class="arrowLeft"><</div>
			<div class="arrowRight">></div>
		</div>
	
	</body>

adv.css

ul,
li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.adver {
	margin: 0 auto;
	width: 590px;
	overflow: hidden;
	height: 470px;
	position: relative;
	background: url("../images/adver01.jpg");
}

ul {
	position: absolute;
	bottom: 10px;
	z-index: 100;
	width: 100%;
	text-align: center;
}

ul li {
	display: inline-block;
	font-size: 10px;
	line-height: 20px;
	font-family: "微软雅黑";
	margin: 0 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #333333;
	text-align: center;
	color: #ffffff;
}

.arrowLeft,
.arrowRight {
	position: absolute;
	width: 30px;
	background: rgba(0, 0, 0, 0.2);
	height: 40px;
	line-height: 40px;
	text-align: center;
	top: 200px;
	z-index: 150;
	font-family: "微软雅黑";
	font-size: 25px;
	font-weight: bold;
	cursor: pointer;
	display: none;
	color:snow;
}

.arrowLeft {
	left: 10px;
}

.arrowRight {
	right: 10px;
}

.bg{
	background: orange;
}

adv.js

$(function() {

		//添加第一个样式
		$("li:first").addClass("bg");

		//鼠标移动  adver
		$(".adver").mouseover(function() {
			$(".arrowLeft").show();
			$(".arrowRight").show();
		}).
		mouseout(function() {
			$(".arrowLeft").hide();
			$(".arrowRight").hide();
		});

		//图片数组
		var imgs = new Array("adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg");

		//统计个数
		var count = 0;

		//单击右 边的>
		$(".arrowRight").click(function() {
			//判断
			if(count == imgs.length - 1) {
				count=0;
			} else {
				count++; //累计
			}
			$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
			$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
			$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景

		});

		//单击左边的>
		$(".arrowLeft").click(function() {
			//判断
			if(count == 0) {
				count=imgs.length - 1;
			} else {
				count--; //累计			
			}
			    $(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
				$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
				$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景

		});
////////////////////图片自动滚动/////////////////////////////////
		//开启定时器
		var timer = setInterval(function() {
			if(count == imgs.length - 1) {
                count=0; //回到起点0
			} else {
				count++; //累计
			}
			$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
			$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
			$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景
		}, 1000);
		

		//鼠标移入、移出
		$(".adver").hover(function() {
			clearInterval(timer);  //鼠标移入,定时器关闭
		}, function() {
			 //鼠标移出,开启定时器
			timer = setInterval(function() {
			if(count == imgs.length - 1) {
                count=0; //回到起点0
			} else {
				count++; //累计
			}
			$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
			$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
			$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景
		 }, 1000);
		});

	});

Jquery 广告图片轮播切换

猜你喜欢