轮播图的实现

 一、引入文件这三个一定要引入

 HTML部分

<div class="c-banner">
			<!-- 放轮播图的图片 -->
			<div class="banner">
				<ul>
					<li><img src="../img/pic3.jpg"></li>
					<li><img src="../img/pic2.jpg"></li>
					<li><img src="../img/pic3.jpg"></li>
				</ul>
			</div>
			<!-- 左右箭头，点击可切换至上（下）一图片 -->
			<div class="nexImg">
				<img src="../img/nexImg.png" />
			</div>
			<div class="preImg">
				<img src="../img/preImg.png" />
			</div>
			<div class="jumpBtn">
				<ul>
					<li jumpImg="0"></li>
					<li jumpImg="1"></li>
					<li jumpImg="2"></li>
				</ul>
			</div>
		</div>

CSS部分

.c-banner {
				width: 100%;
				position: relative;
			}
			
			.c-banner img {
				width: 100%;
			}
			.c-banner .banner ul {
				list-style: none;
				padding-left: 0px;
				margin-bottom: 0px;
			}
			.c-banner .banner ul li {
				display: none;
				opacity: 0;
			}
			
			.c-banner .banner ul li:nth-child(1) {
				opacity: 1;
				display: block;
			}
			
			.c-banner .banner ul li img {
				width: 100%;
				height: 450px;
				position: absolute;
				top: 0px;
			}
			
			.c-banner .banner ul li:first-child img {
				position: relative;
			}
			
			.c-banner .nexImg,
			.c-banner .preImg {
				padding: 1.5625rem 0.625rem 1.5625rem 0.625rem;
				position: absolute;
				top: 50%;
				margin-top: -53px;
				background: #000000;
				opacity: 0.5;
				border-radius: 0.3125rem;
				z-index: 10;
			
			}
			
			.c-banner .nexImg:hover,
			.c-banner .preImg:hover {
				opacity: 0.8;
			}
			
			.c-banner .nexImg {
				right: 0px;
			}
			
			.c-banner .jumpBtn {
				width: 100%;
				position: absolute;
				bottom: 1.25rem;
				text-align: center;
			}
			
			.c-banner .jumpBtn ul {
				margin-bottom: 0px;
				padding: 0px;
			}
			
			.c-banner .jumpBtn ul li {
				width: 1.875rem;
				height: 1.875rem;
				border-radius: 50%;
				display: inline-block;
				opacity: 0.9;
				margin-left: 0.625rem;
				width: 1.25rem;
				height: 1.25rem;
			}
			
			.c-banner .jumpBtn ul li:first-child {
				margin-left: 0px;
			
			}

 js相关代码

//定时器返回值
		var time = null;
		//记录当前位子
		var nexImg = 0;
		//用于获取轮播图图片个数
		var imgLength = $(".c-banner .banner ul li").length;
		//当时动态数据的时候使用,上面那个删除
		// var imgLength =0;
		//设置底部第一个按钮样式
		$(".c-banner .jumpBtn ul li[jumpImg=" + nexImg + "]").css("background-color", "black");
		//页面加载
		$(document).ready(function() {
			// dynamicData();
			//启动定时器,设置时间为3秒一次
			time = setInterval(intervalImg, 3000);
		});

		//点击上一张
		$(".preImg").click(function() {
			//清楚定时器
			clearInterval(time);
			var nowImg = nexImg;
			nexImg = nexImg - 1;
			console.log(nexImg);
			if (nexImg < 0) {
				nexImg = imgLength - 1;
			}
			//底部按钮样式设置
			$(".c-banner .jumpBtn ul li").css("background-color", "white");
			$(".c-banner .jumpBtn ul li[jumpImg=" + nexImg + "]").css("background-color", "black");

			//将当前图片试用绝对定位,下一张图片试用相对定位
			$(".c-banner .banner ul img").eq(nowImg).css("position", "absolute");
			$(".c-banner .banner ul img").eq(nexImg).css("position", "relative");

			//轮播淡入淡出
			$(".c-banner .banner ul li").eq(nexImg).css("display", "block");
			$(".c-banner .banner ul li").eq(nexImg).stop().animate({
				"opacity": 1
			}, 1000);
			$(".c-banner .banner ul li").eq(nowImg).stop().animate({
				"opacity": 0
			}, 1000, function() {
				$(".c-banner ul li").eq(nowImg).css("display", "none");
			});

			//启动定时器,设置时间为3秒一次
			time = setInterval(intervalImg, 3000);
		})

		//点击下一张
		$(".nexImg").click(function() {
			clearInterval(time);
			intervalImg();
			time = setInterval(intervalImg, 3000);
		})

		//轮播图
		function intervalImg() {
			if (nexImg < imgLength - 1) {
				nexImg++;
			} else {
				nexImg = 0;
			}

			//将当前图片试用绝对定位,下一张图片试用相对定位
			$(".c-banner .banner ul img").eq(nexImg - 1).css("position", "absolute");
			$(".c-banner .banner ul img").eq(nexImg).css("position", "relative");

			$(".c-banner .banner ul li").eq(nexImg).css("display", "block");
			$(".c-banner .banner ul li").eq(nexImg).stop().animate({
				"opacity": 1
			}, 1000);
			$(".c-banner .banner ul li").eq(nexImg - 1).stop().animate({
				"opacity": 0
			}, 1000, function() {
				$(".c-banner .banner ul li").eq(nexImg - 1).css("display", "none");
			});
			$(".c-banner .jumpBtn ul li").css("background-color", "white");
			$(".c-banner .jumpBtn ul li[jumpImg=" + nexImg + "]").css("background-color", "black");
		}

		//轮播图底下按钮
		//动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用
		$(".c-banner .jumpBtn ul li").each(function() {
			//为每个按钮定义点击事件
			$(this).click(function() {
				clearInterval(time);
				$(".c-banner .jumpBtn ul li").css("background-color", "white");
				jumpImg = $(this).attr("jumpImg");
				if (jumpImg != nexImg) {
					var after = $(".c-banner .banner ul li").eq(jumpImg);
					var befor = $(".c-banner .banner ul li").eq(nexImg);

					//将当前图片试用绝对定位,下一张图片试用相对定位
					$(".c-banner .banner ul img").eq(nexImg).css("position", "absolute");
					$(".c-banner .banner ul img").eq(jumpImg).css("position", "relative");

					after.css("display", "block");
					after.stop().animate({
						"opacity": 1
					}, 1000);
					befor.stop().animate({
						"opacity": 0
					}, 1000, function() {
						befor.css("display", "none");
					});
					nexImg = jumpImg;
				}
				$(this).css("background-color", "black");
				time = setInterval(intervalImg, 3000);
			});
		});