JS—实现轮播图效果

---

前言

用JS实现轮播图效果
现在我们在很多网站上都能看到轮播图，像某东、某宝、某猫等等大小型网站上都有应用，方法呢也有很多种。
实现的功能：
（1）点击下方小圆点可以实现图片切换

（2）点击左右的按键可以实现图片切换

（3）自动轮播图片

（4）鼠标放上去停止自动播放，鼠标离开自动播放

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、轮播图基本HTML布局

创建一个大盒子里面存放轮播图的图片，左右箭头，小圆点按钮。总共展示五张图片，图片中间下方5 个点的代表展示顺序。图片左右两边的箭头上一张和下一张。

   <div id="box">
			<div id="left">  <!--左箭头-->
				<span><</span>
			</div>
			<div id="right">   <!--右箭头-->
				<span>></span>
			</div>
			<div id="anniu">    <!--五个按钮-->
				<p class="yans"></p>
				<p></p>
				<p></p>
				<p></p>
				<p></p>
			</div>
			<div id="tup">
				<img class="tup-1" src='img/1.jpg' />  <!--五张图片-->
				<img src='img/2.jpg' />
				<img src='img/3.jpg' />
				<img src='img/4.jpg' />
				<img src='img/5.jpg' />
			</div>
    </div>

二、轮播图CSS布局

定义全局变量，清除页面对创建CSS布局时的影响。设置图片大小为100%；给最大div设成相对定位。通过给第一张图片设置ID让它显示图片，其它隐藏起来。

          * {
     /*全局选择器*/
				margin: 0;  /*外边距*/
				padding: 0; /*内边距*/
			}	
			img {
   
				display: none;  /*隐藏图片*/
			}
			#tup img {
   
				width: 100%;
				height: 100%;
			}
			#box {
   
				position: relative;  /*设置相对定位*/
			}
			.tup-1 {
   
				display: block;  /*显示图片*/
			}

设置左、右箭头的样式，通过设置绝对定位参照父级元素进行定位，给按钮添加颜色样式。更改箭头的透明度，字体大小，实现椭圆效果等。

             #left {
   
				background-color: #000000;
				opacity: 0.5;    /*透明度*/
				position: absolute;  /*设置绝对定位*/
				font-size: 50px;
				top: 40%;       
				color: lightsteelblue;
				cursor: pointer;  /*设置鼠标小手*/
			}
			#right {
   
				background-color: #000000;
				opacity: 0.5;
				position: absolute; /*设置绝对定位*/
				font-size: 50px;
				top: 40%;
				right