Java教程

超详细的原生JavaScript轮播图（幻灯片）的制作

本文主要是介绍超详细的原生JavaScript轮播图（幻灯片）的制作，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本次轮播图的制作主要分为3个部分，分别是：设置定时器自动轮播；点击左右切换按钮轮播；下方点击按钮轮播。具体实现步骤如下：
（效果图）
html部分代码如下：

<div class="slidebox">
					<ul class="ul1" id="ul1">
						<li><img src="img/solid.png" width="100%" height="500px">
							<p class="slide-p1">走进酒文化&nbsp品味历史悠酒</p>
						</li>
						<li><img src="img/jiuwh.jpg" width="100%" height="500px">
							<p class="slide-p2">
							<p class="slide-p21">酒<br>之<br>历<br>史</p>
							<p class="slide-p22">酒<br>之<br>常<br>识</p>
							<p class="slide-p23">酒<br>之<br>文<br>化</p>
							<p class="slide-p24">酒<br>之<br>工<br>艺</p>
							<p class="slide-p25">酒<br>之<br>典<br>故</p>
							</p>
						</li>
						<li><img src="img/jiu-1.jpg" width="100%" height="500px">
							<p class="slide-p3">酒香飘百年、历久弥香，既得益于得天独厚的酿造环境<br>更缘于人们长期以来对传统工艺的矢志坚守、对品质把控的一丝不苟</p>
						</li>
						<li><img src="img/jiu2.jpg" width="100%" height="500px">
							<p class="slide-p4">
								"和"，《说文》解为"相应也"，《广雅》解为谐也。和乐之本也，强调的是和谐、协调；"发而皆中节谓之和"，倾向于平衡、稳健。中华文明历来强调天人合一、尊重自然，"万物各得其和以生，各得其养以成"。
							</p>
						</li>
					</ul>
					<div class="left-botton indexs" id="left-botton">
						&lt;
					</div>
					<div class="right-botton indexs" id="right-botton">
						&gt;
					</div>
					<ul class="ul2 indexs" id="ul2">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>

css部分代码如下：

.slidebox {
				width: 100%;
				height: 500px;
				position: relative;
			}

			.slidebox ul {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.ul1 {
				width: 100%;
				height: 100%;
			}

			.ul1>li {
				position: absolute;
				top: 0;
				left: 0;
			}

			.left-botton {
				margin-left: 50px;
				width: 80px;
				height: 80px;
				background: whitesmoke;
				text-align: center;
				color: skyblue;
				line-height: 70px;
				position: absolute;
				font-size: 50px;
				top: 195px;
				left: 0;
				border-radius: 100%;
				opacity: 0;
			}

			.slidebox:hover .left-botton {
				opacity: 0.8;
				transition: 0.5s;
			}

			.right-botton {
				margin-right: 50px;
				width: 80px;
				height: 80px;
				background: whitesmoke;
				opacity: 0;
				text-align: center;
				color: skyblue;
				line-height: 70px;
				position: absolute;
				font-size: 50px;
				top: 195px;
				right: 0;
				border-radius: 100%;
			}

			.slidebox:hover .right-botton {
				opacity: 0.8;
				transition: 0.5s;
			}


			.left-botton:hover {
				cursor: pointer;
				color: whitesmoke;
				opacity: 1;
				background: skyblue;
			}

			.right-botton:hover {
				cursor: pointer;
				color: whitesmoke;
				opacity: 1;
				background: skyblue;
			}

			.ul2 {
				position: absolute;
				bottom: 25px;
				right: 560px;
			}

			.ul2>li {
				width: 60px;
				height: 10px;
				background: white;
				line-height: 20px;
				float: left;
				border-radius: 3px;
				margin-right: 30px;
			}

			.ul2>li:hover {
				background: orangered;
				cursor: pointer;
				color: white;
			}

			.ul2>li:nth-child(1) {
				background: orangered;
				color: white;
			}

			.ul1>li:nth-child(1) {
				z-index: 100;
			}

			.indexs {
				z-index: 200;
			}

JS部分代码如下：

var imgs = document.getElementById("ul1").children; //找到需要操作的所有图片
			var botton = document.getElementById("ul2").children; //找到需要操作的所有下方点击按钮
			var leftbotton = document.getElementById("left-botton"); //找到需要操作的左切换按钮
			var rightbotton = document.getElementById("right-botton"); //找到需要操作的右切换按钮
			var index = 0; //标记当前展示图片的索引
			var dingshiqi; //定义定时器
			chongqi(); //调用重启定时器

			//绑定定时器自动切换事件
			function chongqi() {
				dingshiqi = setInterval(function() {
					index++; //跳转到下一张图片
					if (index == imgs.length) {
						index = 0;
					} //使图片无限循环播放
					for (var i = 0; i < imgs.length; i++) {
						imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
						botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
					}
					imgs[index].style.cssText = "z-index:100;"; //显示当前图片
					botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
				}, 4000); //定时器每隔4秒自动跳转到下一张图片
			}

			//绑定左切换按钮的点击事件
			leftbotton.onclick = function() {
				clearInterval(dingshiqi); //关闭定时器
				index--; //跳转到上一张图片
				if (index < 0) {
					index = imgs.length - 1;
				}
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
					botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
				}
				imgs[index].style.cssText = "z-index:100;"; //显示当前图片
				botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
				chongqi(); //重启定时器
			}

			//绑定右切换按钮的点击事件
			rightbotton.onclick = function() {
				clearInterval(dingshiqi); //关闭定时器
				index++; //跳转到下一张图片
				if (index > imgs.length - 1) {
					index = 0;
				} 
				for (var i = 0; i < imgs.length; i++) {
					imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
					botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
				}
				imgs[index].style.cssText = "z-index:100;"; //显示当前图片
				botton[index].style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
				chongqi(); //重启定时器
			}

			//绑定所有点击按钮的点击事件
			for (let i = 0; i < imgs.length; i++) {
				botton[i].onclick = function() {
					clearInterval(dingshiqi); //关闭定时器
					index = i;
					for (let i = 0; i < imgs.length; i++) {
						imgs[i].style.cssText = "z-index:0;"; //隐藏所有图片
						botton[i].style.cssText = "background:white;"; //使所有点击按钮的背景颜色变成白色
					}
					imgs[index].style.cssText = "z-index:100;"; //显示当前图片
					this.style.cssText = "background:orangered;"; //使当前指定点击按钮的背景颜色变成红色
					chongqi(); //重启定时器
				}
			}

通过以上步骤就可以实现一个完整的轮播图效果了

这篇关于超详细的原生JavaScript轮播图（幻灯片）的制作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航