JS原生之-----带导航的轮播图jq版

最新推荐文章于 2022-10-23 10:26:29 发布

玉米_欣

最新推荐文章于 2022-10-23 10:26:29 发布

阅读量1.1k

点赞数 1

分类专栏：前端 js 文章标签： function javascript 导航 jQuery 运动

本文链接：https://blog.csdn.net/u012967849/article/details/52704846

版权

前端同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轮播图-欣欣博客</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			#banner {
				width: 600px;
				height: 200px;
				overflow: hidden;
				position: relative;
				margin: auto;
			}
			
			.banner-ul {
				width: 3600px;
				height: 200px;
				list-style: none;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.banner-ul-li {
				float: left;
				width: 600px;
				height: 200px;
				text-align: center;
				line-height: 200px;
			}
			
			.banner-nav {
				width: 125px;
				height: 15px;
				position: absolute;
				right: 10px;
				bottom: 10px;
			}
			
			.banner-nav li {
				list-style: none;
				float: left;
				margin-right: 10px;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				text-align: center;
				background: black;
				color: #fff;
				font-size: 12px;
			}
		</style>
		<script src="jquery-1.11.0.js"></script>
		<script>
			$(function() {
				var $banner = $("#banner");
				var currentIndex = 0;
				var autoTabImg = setInterval(tabImg, 1000);

				function tabImg() {
					if(currentIndex > 5) {
						$("#banner :first").css("left", "0");
						currentIndex = 1;
					}
					tabNav();
					$("#banner :first").animate({
						left: -600 * currentIndex
					}, function() {
						currentIndex++;
					});
				}

				function tabNav() {
					$(".banner-nav li").each(function() {
							$(this).css("background", "");
						})
						//导航切换
					$(".banner-nav li").eq(currentIndex == 5 ? 0 : currentIndex).css("background", "gray");
				};

				$banner.mouseenter(function() {
					clearInterval(autoTabImg);
				});

				$banner.mouseleave(function() {
					autoTabImg = setInterval(tabImg, 1000);
				});
				$(".banner-nav li").each(function() {
					$(this).click(function() {
						currentIndex = $(this).index();
						tabImg();
						console.log();
					})
				})

			})
		</script>
	</head>

	<body>
		<div id="banner">
			<ul class="banner-ul">
				<li class="banner-ul-li" style="background:red;">学习</li>
				<li class="banner-ul-li" style="background:yellow;">交流</li>
				<li class="banner-ul-li" style="background:blue;">评论</li>
				<li class="banner-ul-li" style="background:green;">点赞</li>
				<li class="banner-ul-li" style="background:orange;">进步</li>
				<li class="banner-ul-li" style="background:red;">学习</li>
			</ul>
			<ul class="banner-nav">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>

		</div>
	</body>

</html>