js实现幻灯片轮播图

本文实例为大家分享了js实现幻灯片轮播图的具体代码，供大家参考，具体内容如下

1.html

选取了五张图片放入div中，然后是左右箭头，以及按钮，代码如下

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>轮播图</title><link href=\"../css/轮播图.css\" rel=\"stylesheet\"></head><body><div id=\"box\"><img src=\"../image/car-1.jpg\"><img src=\"../image/car-2.jpg\"><img src=\"../image/car-3.jpg\"><img src=\"../image/car-4.jpg\"><img src=\"../image/car-5.jpg\"><div class=\"arrow\"><a class=\"left\" href=\"javacript:void(0);\" ><</a><a class=\"right\" href=\"javacript:void(0);\" >></a></div><ul class=\"btn\"><li class=\"on\" slideIndex=\"1\">1</li><li slideIndex=\"2\">2</li><li slideIndex=\"3\">3</li><li slideIndex=\"4\">4</li><li slideIndex=\"5\">5</li></ul></div><script src=\"../js/轮播图.js\"></script></body></html>

2.css给div设置居中

将所有图片隐藏，设置箭头和小圆点的样式
代码如下

*{margin:0;padding:0;text-decoration: none;list-style: none;}#box{width:800px;height: 500px;margin:50px auto 0px;position: relative;}#box img{width:800px;height: 500px;display: none;animation:fade 3s;}#box .arrow{width:800px;height: 80px;position: absolute;top:50%;margin-top: -40px;}#box .arrow .left,.right{display: inline-block;line-height: 80px;width: 50px;height:80px;}#box .arrow .left:hover{background:rgba(0,0,0,0.8);}#box .arrow .right:hover{background:rgba(0,0,0,0.8);}#box .arrow .right{text-align: right;position: absolute;right:0;}#box .arrow a{font-size: 50px;color: #ffffff;}#box .btn{position: absolute;bottom: 10px;left:50%;margin-left: -98.47px;text-align: center;}#box .btn li{text-align: center;margin:0 5px;padding: 10px;float:left;background:white;border-radius:20%;cursor: pointer;transition: background 2s ease;}#box .btn .on{background: #000;color:white;}@keyframes fade{from{opacity:.4;}to{opacity:1;}}

3.js部分

js设定让当前图片显示display：block，其他图片隐藏display：none；

js代码如下

window.onload=function () {var left=document.getElementsByClassName(\"left\")[0];var right=document.getElementsByClassName(\"right\")[0];var btn=document.getElementsByClassName(\"btn\")[0].getElementsByTagName(\"li\");var box=document.getElementById(\"box\");var slideIndex=1;var index=1;var timer;//图片切换函数showSlides(slideIndex);function showSlides(n) {var slides=document.getElementById(\"box\").getElementsByTagName(\"img\");for(var i=0;i<slides.length;i++){slides[i].style.display=\"none\";btn[i].className=\"\";}slides[slideIndex-1].style.display=\"block\";btn[slideIndex-1].className=\"on\"}//箭头切换left.onclick=function () {if(slideIndex>1) {slideIndex--;showSlides(slideIndex);}else {slideIndex=5;showSlides(slideIndex);}}right.onclick=function () {if(slideIndex<5) {slideIndex++;showSlides(slideIndex);}else {slideIndex=1;showSlides(slideIndex);}}//btn切换for(var i=0;i<btn.length;i++){btn[i].onclick=function () {var myslideIndex=this.getAttribute(\'slideIndex\');// var myindex=parseInt(this.getAttribute(\"index\"));slideIndex=myslideIndex;showSlides(slideIndex);}}//自动播放function play() {timer=setInterval(function () {right.onclick();},4000);}function stop() {clearInterval(timer);}box.onmouseout=play;box.onmouseover=stop;play();}

以上就是本文的全部内容，希望对大家的学习有所帮助