[前端项目学习笔记] 200行代码网站首页轮播实现（html,css,js）

1.设置基本布局

整体布局我们参考京东网站主页
1.首先我们需要一块区域放置图片，通过创建一个包含5个列表项的无序列表，并设置列表项的样式（图片的宽、高、字体大小）放置五张图片
2.通过绝对定位把五张图片放在同一个位置（因为我们需要在同一个位置切换图片）
3.绝对定位的使用：设置绝对定位的元素，其父元素要设置成相对定位，因为绝对定位是相对于其父元素而言的

<div class="wrap">
			<ul class="list">
				<li class="item">0</li>
				<li class="item">1</li>
				<li class="item">2</li>
				<li class="item">3</li>
				<li class="item">4</li>
			</ul>
</div>

未设置绝对定位效果，所有的列表项依次排开

		/* 无序列表的样式 */
		.list{
			position: relative;
			width: 800px;
			height: 400px;
		}
		/* 列表项的样式，列表项代表每一张图片 */
		.item{
			position: absolute;
			width: 100%;
			height: 100%;
			font-size: 50px;
		}

设置了绝对定位效果之后，因为所有的元素都定位在相同的位置，所以之前的列表项都被覆盖了

2.添加轮播按钮

上面我们已经实现了放图片的容器，我们还需要添加切换上下张图片的按钮，并给按钮添加样式（按钮需要处与图片中间，整个图片高400，按钮高100，所以按钮需要距离其相对位置元素（列表）的顶部150个像素）

			<button class="btn" id="goPre"><</button>
			<button class="btn" id="goNext">></button>
			.btn{
			position: absolute;
			top:150px;
			width: 50px;
			height: 100px;
			}

加了按钮后的效果

3.轮播代码初步实现

1.原理：给列表项加上层级， z-index越大，显示级别越高，最先显示。这也是轮播图片的原理（所有图片叠放在一起，哪张图片的层级最高就显示哪一张。）
2.我们可通过一个索引index记录下当前轮播到哪张图片，如果想要显示指定图片，只要给当前图片加上高层级即可
（设置其类名为item active）

//获取dom对象
		var items=document.getElementsByClassName("item");
		var goPreBtn=document.getElementById("goPre");
		var goNextBtn=document.getElementById("goNext");
		var index=0;
		//给指定的图片加上层级--》第index张图片有active这个类名
		var goIndex=function(){
			//在添加层级之前需要清空上一次轮播的效果
			clearActive();
			items[index].className="item active";
		}
		var clearActive=function(){
			for (var i = 0; i < items.length; i++) {
				items[i].className="item";
			}
		}

4.给按钮添加点击事件实现轮播

1.给两个按钮分别添加点击事件，通过改变index图片的索引实现，点击下一张，index就增1，点击上一张index就减1，并且也需要给index做出范围限制，实现图片轮播到最后一张，就能跳转到第一张的效果
2.我们通过代码
opacity: 0;
transition: opacity .8s;
实现图片淡入淡出效果
3.此时我们就不需要在控制台手动修改index值来实现图片跳转了

goPreBtn.addEventListener('click',function(){
			if(index==0){
				index=4;
			}
			else{
				index--;
			}
			goIndex(index);
		})
		goNextBtn.addEventListener('click',function(){
			if(index==4){
				index=0;
			}else{
				index++;
			}
			
			goIndex(index);
		})

5.添加圆点轮播

1.我们需要五个圆点来实现更美观的轮播效果，点击哪一个圆点，就会跳转到相应的图片
2.难点是圆点的定位和排版格式
圆点定位在相对于div容器，距离div容器右方20像素，下方20像素的位置,一开始无序列表是竖着的状态，我们需要设置其横放漂浮状态，并且为了美观我们给点设置了圆形的透明边框

			<ul class="pointList">
				<li class="point active" data-index=0></li>
				<li class="point" data-index=1></li>
				<li class="point" data-index=2></li>
				<li class="point" data-index=3></li>
				<li class="point" data-index=4></li>
			</ul>
			
			.pointList{
			list-style: none;
			padding-left: 0px;
			position: absolute;/*相对于div容器的绝对位置*/
			right:20px;
			bottom: 20px;
			z-index: 1000;
		}
		.point{
			float: left;/*漂浮*/
			width:8px;
			height:8px;
			background-color: rgba(0,0,0,0.4);/*背景颜色黑色*/
			margin-right: 16px;
			border-style: solid;
			border-radius: 100%;/*圆形的边框*/
			borde-width:2px;
			border-color: rgba(255,255,255,0.6);/*边框的白色*/
			cursor: pointer;/*改变鼠标箭头为小手*/
		}
		.point.active{
			background-color: rgba(255,255,255,0.6);
		}

6.将列表项替换为图片，并给图片加上超链接

在以上过程中，我们只是使用纯颜色的列表项，并没有使用到真实的图片，我们将图片放进项目中，并给图片加上一个超链接，实现点击图片就能跳转网页的效果

<ul class="list">
				<a  class="item active" href="https://pro.jd.com/mall/active/4AfQf3FkPRGHhtqqKh9tsWyV97sy/index.html?innerAnchor=100023781630&focus=4"><img src="./img/q.jpg"></a>
				<a  class="item" href="https://pro.jd.com/mall/active/3uQmoZwycRCamuwFqgosMZNRQ92C/index.html?innerAnchor=12867012&focus=4"><img src="./img/q-1.jpg"></a>
				<a  class="item" href="https://mall.jd.com/index-1000105938.html?imup=CgYKABIAGAASFwi85srG9AIQ0s_x3AMaA3JnZSDSBSgBGLAbIAAqJm1peHRhZ19pLHViLHhnZyxnaWEsY2ljLGZfYmFfZmxfbDE2MzM2MghtaXh0YWdfaUrDAUl8TUlYVEFHX0lSLElfQV9GTF9VMTM5MzMsSV9BX1JFX1UxMzkzMyxJX0FfUExfUixJX0FfU0xfUixJX0FfQ1NfTEMsSV9BX1JTX1IsSV9VX0ZMX1IsSV9TX0ZMX1IsSV9SX0ZMX1IsSV9QX0ZMX1IsSV9HX1hHX1IsSV9HX1JMX0xDLElfQl9GTF9SLEdJQSxYR0csVUF8RypJX1VfRkxfTDE3NDk4O0Z8TUlYVEFHX0ZSLEZfQkFfRkxfTDE2MzM2fA&extension_id=eyJhZCI6IjM1MDQiLCJjaCI6IjIiLCJza3UiOiIxMDAwMDYwMTU4MDQiLCJ0cyI6IjE2NDU3ODkwNTYiLCJ1bmlxaWQiOiJ7XCJjbGlja19pZFwiOlwiYjRhNjU3M2YtODYwMi00NjQ2LTg1ZWQtMTM3MWRiODYwNDQwXCIsXCJtYXRlcmlhbF9pZFwiOlwiOTE3MjIwMzc3ODYzODgxNTE2M1wiLFwicG9zX2lkXCI6XCIzNTA0XCIsXCJzaWRcIjpcIjAzZTY4MDc5LTI2MGMtNDExNC1hMWNiLWRmNjk1ODFmMTAzOFwifSJ9&jd_pop=b4a6573f-8602-4646-85ed-1371db860440&abt=0"><img src="./img/q-2.jpg"></a>
				<a  class="item" href="https://pro.jd.com/mall/active/3dJz8Jw833BZC9XYQqGQWyWrdKmp/index.html?innerAnchor=6555441&focus=4"><img src="./img/q-3.jpg"></a>
				<a  class="item" href="https://pro.jd.com/mall/active/4JjMcoG3vbqwWNKsURisPifdZEEH/index.html?extension_id=eyJhZCI6IjM1MDMiLCJjaCI6IjIiLCJzaG9wIjoiMTEzNzc1IiwidHMiOiIxNjQ1Nzg5NTEwIiwidW5pcWlkIjoie1wiY2xpY2tfaWRcIjpcIjNlNzdjYzg3LTA1M2MtNDFkYS1iOTc1LTI0NjA2ZTVmZWI4NVwiLFwibWF0ZXJpYWxfaWRcIjpcIjU5ODY4NTE1MjFcIixcInBvc19pZFwiOlwiMzUwM1wiLFwic2lkXCI6XCI5N2EwYmNmZi1kNWU1LTQ3M2UtODZlMi1hNTE3Y2I3MGExZWJcIn0ifQ==&jd_pop=3e77cc87-053c-41da-b975-24606e5feb85&abt=1"><img src="./img/q-4.png"></a>
			</ul>

7.最终效果

见视频

图片轮播html css js实现（200行代码）