jquery实现轮播图，可点击左右切换

最新推荐文章于 2024-07-31 21:34:37 发布

我是一只萌新小菜鸟

最新推荐文章于 2024-07-31 21:34:37 发布

阅读量8.9k

点赞数 5

分类专栏： web前端文章标签：轮播图

本文链接：https://blog.csdn.net/Denghalou/article/details/81842112

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			
			div.content {
				position: relative;
				width: 512px;
				height: 320px;
				margin: 80px auto;
			}
			
			ul {
				list-style-type: none;
			}
			
			ul.uIndex {
				position: absolute;
				bottom: 10px;
				left: 135px;
			}
			
			ul.uItems li {
				position: absolute;
			}
			
			ul.uItems li img {
				width: 512px;
			}
			
			div.btn {
				width: 40px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				background: #4d4d4d;
				opacity: .8;
				color: white;
				font-size: 20px;
				position: absolute;
			}
			
			div.btnPrev {
				top: 130px;
			}
			
			div.btnNext {
				top: 130px;
				right: 0;
			}
			
			ul.uIndex li {
				width: 30px;
				height: 30px;
				background: #11c1f3;
				text-align: center;
				line-height: 30px;
				color: white;
				border-radius: 50%;
				float: left;
				margin-right: 10px;
			}
			
			ul.uIndex li.bg {
				background: #e42012;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			var showIndex = 0;
			var timer;
			$(function() {
				$("ul.uItems li").not(":eq(0)").css("display", "none");
				startTimer();

				$("ul.uIndex li").hover(function() {
					clearInterval(timer);

					showIndex = $(this).index();
					showImg();
				}, function() {
					startTimer();
				});

				$(".btnPrev").click(function() {
					clearInterval(timer);

					if(showIndex == 0) showIndex = 6;
					showIndex--;
					showImg();
					startTimer();
				});

				$(".btnNext").click(function() {
					clearInterval(timer);

					if(showIndex == 5) showIndex = -1;
					showIndex++;
					showImg();
					startTimer();
				});
			});

			function startTimer() {
				timer = setInterval(function() {
					showIndex++;
					if(showIndex >= 6) showIndex = 0;
					showImg();
				}, 4000);
			}

			function showImg() {
				$("ul.uItems li").stop(true, true);
				$("ul.uItems li").fadeOut(400).eq(showIndex).fadeIn(400);
				$("ul.uIndex li").removeClass("bg").eq(showIndex).addClass("bg");
			}
		</script>
	</head>

	<body>
		<div class="content">
			<ul class="uItems">
				<li><img src="image/1.jpg" /></li>
				<li><img src="image/2.jpg" /></li>
				<li><img src="image/3.jpg" /></li>
				<li><img src="image/4.jpg" /></li>
				<li><img src="image/5.jpg" /></li>
				<li><img src="image/6.jpg" /></li>
			</ul>
			<div class="btn btnPrev">
				<</div>
					<div class="btn btnNext">></div>
					<ul class="uIndex">
						<li class="bg">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
					</ul>
			</div>
	</body>

</html>