轮播图效果示例 JS+html+css

javascript初学者通常会做到轮播图练习，本篇文章用到的要素不多。

首先我们来看效果图

通过这张效果图可以看到本次轮播图主要由是由点击响应函数构成。

 一、body排版阶段

	<div class="boxbox">
		<div class="box">
			<img src="轮播1.webp" alt="" class="imgg">
		</div>
		<div class="box1">
			<span class="preceding">
				< </span>
					<span class="next"> > </span>
		</div>
		<div class="box2">
			<ul class="lis">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<p></p>
	</div>

排版效果

 

二、style样式

<style>
		* {
			padding: 0;
			margin: 0;
		}
		.boxbox {
			width: 500px;
			height: 4200px;
			margin: 100px auto;
			position: relative;
		}
		.box {
			width: 500px;
			height: 400px;
		}
		img {
			width: 500px;
			height: 400px;
		}

		.box1 {
			width: 200px;
			background-color: pink;
		}

		.preceding,
		.next {
			border: none;
			cursor: pointer;
			color: #777;
		}

		.preceding {
			position: absolute;
			top: 200px;
			font-size: 30px;

		}

		.next {
			position: absolute;
			top: 200px;
			right: 0;
			font-size: 30px;

		}

		p {
			height: 20px;
			text-align: center;
		}

		.box2 {
			position: absolute;
			top: 380px;
		}

		.box2>ul {
			margin-left: 20px;
		}

		.box2>ul>li {
			list-style: none;
			width: 8px;
			height: 8px;
			background-color: #888;
			border-radius: 50%;
			color: rgb(173, 165, 165);
			float: left;
			margin-right: 5px;
			font-size: 5px;
			text-align: center;
			box-shadow: 0px 0px 0px 2px rgba(239, 223, 223, 0.48);
		}

		.nav {
			width: 100%;
			height: 40px;
			background-color: pink;
			position: fixed;
			display: none;
			left: 0;
			top: 0;
			z-index: 999;
		}
	</style>

（当前效果）

 

以上静态网页初步排成功。

接下来就是如何在script里操作静态网页代码

首先我们需要获取每一个需要操作的节点，并将要轮播的图片放进一个数组里，方便我们通过下标索引去遍历它。

var imgArr = ['轮播1.webp', '轮播2.webp', '轮播3.jpg', '轮播4.jpg', '轮播5.webp', '轮播6.jpg', '轮播7.webp', '轮播8.jpg'];

接下来获取节点

var imgArr = ['轮播1.webp', '轮播2.webp', '轮播3.jpg', '轮播4.jpg', '轮播5.webp', '轮播6.jpg', '轮播7.webp', '轮播8.jpg'];
		var preceding = document.querySelector('.preceding');//上一张切换
		var imgg = document.querySelector('.imgg');//获取图片
		var next = document.querySelector('.next');//下一张切换
		var index = 0; //创建一个变量，用来保存当前图片的索引。
		var p = document.querySelector('p');//获取要编辑内容的p标签
		var li = document.querySelectorAll('ul>li');//获取发光的小点

然后遍历每一个li就是想让它变色的小点，并为它绑定单击响应函数，使点击它的时候可以切换到它对应的图片上，且变色。

	for (var i = 0; i < imgArr.length; i++) {
			}
			(function (j) {
				li[j].onclick = function () {//每次循环都创建一个匿名方法，已经给这个匿名方法传了i当时的值 匿名方法里获取到的i就是当时循环的值 而不是循环结束的值
					imgg.src = imgArr[j];
					p.innerHTML = '一共有' + imgArr.length + '张图片,当前是第' + (j + 1) + '张。'//将此时点击到的图片对应的下标通过数据渲染的方式写进p标签中
					for (k = 0; k < imgArr.length; k++) {
						li[k].style.backgroundColor = '#888';
					}//首先写一个循环将每一个li设置为它原本的颜色样式
					li[j].style.backgroundColor = '#fff';//点击到的li变成白色。
				}
			})(i)

 操作箭头实现上一张下一张切换图片

	//切换下一张
next.onclick = function () {
			index++;//点击时，下标加1
			if (index > imgArr.length - 1) {
				index = 0;//当图片到最后一张时，切换到第一张图
			}
			for (k = 0; k < imgArr.length; k++) {
				li[k].style.backgroundColor = '#888';
			}
			li[index].style.backgroundColor = '#fff';//和li里设置的方式一样，为了使箭头与li绑定在一起，切换变色变图片。
			imgg.src = imgArr[index];//点击后切换到的图片
			p.innerHTML = '一共有' + imgArr.length + '张图片,当前是第' + (index + 1) + '张。'//将图片下标写入p标签
		}

	//切换上一张
        preceding.onclick = function () {
			index--;
			if (index < 0) {
				index = imgArr.length - 1;
			}
			for (k = 0; k < imgArr.length; k++) {
				li[k].style.backgroundColor = '#888';
			}
			li[index].style.backgroundColor = '#fff';
			imgg.src = imgArr[index];
			p.innerHTML = '一共有' + imgArr.length + '张图片,当前是第' + (index + 1) + '张。'
		}
		p.innerHTML = '一共有' + imgArr.length + '张图片为,当前是第' + (index + 1) + '张。'//初始时页面显示的p标签

以上就是京东轮播图的写法，不好的地方请指出，希望采纳，谢谢~