在JS中实现图片的自动轮播，同时可以通过左右按钮控制来选择图片，鼠标的移入可以让图片暂停轮播，移出可以使图片继续轮播。
HTML界面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Sample0089 - 焦点轮播图</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <!-- 轮播图 --> <div id="banner"> <!-- 轮播图默认显示的图片 --> <div id="banner-display"> <img src="img/0.jpg" alt="" id="banner-display-img" /> </div> <!-- 轮播图轮播的图片 --> <div id="banner-nav"> <ul> <!-- 存放所有轮播图 --> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <!-- 轮播图左右控制 --> <div id="banner-controller"> <!-- 左边按钮 --> <div id="banner-controller-left"><</div> <!-- 右边按钮 --> <div id="banner-controller-right">></div> </div> </div> </body> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> </html>
CSS代码
* { margin: 0; padding: 0; } #banner { /*轮播图大小*/ width: 960px; height: 540px; /*轮播图边框*/ border: 1px solid #ABCABC; /*轮播图居中*/ margin: 50px auto; /*设置定位标准*/ position: relative; /*设置鼠标样式*/ cursor: pointer; } #banner #banner-display { /*设置图片容器大小*/ width: 100%; height: 100%; } #banner #banner-display img { /*初始化图片*/ border: none; outline: none; /*设置图片大小*/ width: 100%; height: 100%; } #banner #banner-nav { text-align: center; /*设置导航条位置*/ margin-top: -50px; } #banner #banner-nav ul { /*去掉默认小圆点*/ list-style: none; /*去掉内外边距*/ margin: 0px; padding: 0px; /*设置为行内元素*/ display: inline-block; /*设置容器圆角*/ border-radius: 20px; } #banner #banner-nav ul li { /*所有li左浮动*/ float: left; /*设置大小*/ width: 10px; height: 10px; /*设置圆形*/ border-radius: 50%; /*设置外边距*/ margin: 5px; /*设置颜色*/ background: hsla(0, 0%, 100%, .4); /*设置圆圈大小*/ border: 4px solid #FFFFFF; /*设置透明度*/ opacity: .78; /*设置鼠标样式*/ cursor: pointer; } #banner #banner-nav ul li.active { /*所有li左浮动*/ float: left; /*设置大小*/ width: 14px; height: 14px; /*设置圆形*/ border-radius: 50%; /*设置外边距*/ margin: 5px; /*设置颜色*/ background: orange; /*设置圆圈大小*/ border: 2px solid orange; /*动画效果*/ transition: all .78s; } #banner-controller { margin-top: -300px; /*默认不显示*/ display: none; } #banner-controller #banner-controller-left, #banner-controller #banner-controller-right { /*设置左右两个按钮的大小*/ width: 50px; height: 100px; /*设置透明度*/ opacity: .99; /*设置颜色*/ background: hsla(0, 0%, 100%, .4); /*设置字体大小*/ font-size: 30px; /*设置粗细*/ font-weight: 400; /*设置字体颜色*/ color: white; /*设置字体居中*/ text-align: center; /*设置字体垂直居中*/ line-height: 100px; /*设置鼠标样式*/ cursor: pointer; } #banner-controller #banner-controller-left { float: left; } #banner-controller #banner-controller-right { float: right; } #banner-controller #banner-controller-left:hover, #banner-controller #banner-controller-right:hover { background: hsla(0, 0%, 100%, .2); }
js界面
/*获取轮播图的容器*/ let banner = document.getElementById("banner"); /*获取轮播图的图片*/ let img = document.getElementById("banner-display-img"); /*获取导航条的按钮*/ let nav = document.getElementById("banner-nav").getElementsByTagName("li"); /*获取轮播控制条*/ let controller = document.getElementById("banner-controller"); /*获取左边的按钮*/ let prev = document.getElementById("banner-controller-left"); /*获取右边的按钮*/ let next = document.getElementById("banner-controller-right"); /*定义全局的变量*/ let index = 0; /*初始化图片数组*/ let arr = new Array(); for (let i = 0; i < 5; i++) { arr[i] = "img\\" + (i) + ".jpg "; } /*初始化所有导航li*/ for (let i = 0; i < 5; i++) { nav[i].title = i; } /*清空所有导航样式*/ function clearNav() { for (let i = 0; i < 5; i++) { nav[i].className = ""; } } /*设置导航条单击事件*/ for (let i = 0; i < 5; i++) { nav[i].onclick = function() { /*获取导航索引*/ let v = this.title; /*设置当前图片*/ img.src = arr[v]; /*全部清除li样式*/ clearNav(); /*设置当前样式*/ nav[v].className = "active"; /*更改当前索引*/ index = v; }; } /*点击左侧的按钮事件*/ function doPrev() { /*索引累加*/ index--; /*判断是否越界*/ if (index == -1) { index = 4; } img.src = arr[index]; /*全部清除li样式*/ clearNav(); /*设置当前样式*/ nav[index].className = "active"; }; prev.onclick = doPrev; /*点击右侧的按钮事件*/ function doNext() { /*索引累加*/ index++; /*判断是否越界*/ if (index == 5) { index = 0; } img.src = arr[index]; /*全部清除li样式*/ clearNav(); /*设置当前样式*/ nav[index].className = "active"; }; next.onclick = doNext; // 设置自动播放 let timeId = setInterval(doNext, 2000); // 鼠标放上停止播放 banner.onmouseover = function() { clearInterval(timeId); /*导航控制条显示*/ controller.style.display = "block"; }; // 鼠标离开开始播放 banner.onmouseout = function() { timeId = setInterval(doNext, 2000); /*导航控制条显示*/ controller.style.display = "none"; };
