几种不同想法的手写轮播图（第一种）
几种都是比较简单的写法，主要是为了给自己留个记录，怕以后忘记。。。。
第一种：想法是把想要显示的文字和图片分别放入数组，然后根据num的大小让数组array(num)的第num个显示在div中。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 <style type="text/css"> .imgContent img{ width: 400px; height: 314px; } .imgContent{ width: 400px; height: 400px; border: 1px solid rgb(187, 73, 73); margin: 100px auto;position: relative; text-align: center; } .imgContent a{ display: block; position: absolute; bottom: 0; left: 0px;width: 100%; height: 14px; text-align: center;font-size: 14px;line-height: 14px; } .imgContent strong{ position: absolute; top: 50%; font-size: 14px; cursor: pointer; background-color: gray; } .prev{ left: 10px; } .next{ right: 10px; } .buttons{ display:flex; flex-direction: row; justify-content: center; cursor: pointer; height: 14px; margin-bottom: 14px; } .buttons .on{ background-color: #8e8e8e; color: #000000; } .buttons span{ position: relative; font-size: 16px; line-height: 14px; width: 14px; height: 14px; border-radius: 14px; color: #ffffff; background-color: #fc7a01; } </style>
依次下来是一个大框，数字，左右按钮，图片，4个小按钮，其实这个按钮数量也是可以js根据图片数量生成的，我没写。。
<div class="imgContent" id='imgContent'> <a id="numx"></a> <strong id="prev" class="prev"><</strong> <strong id="next" class="next">></strong> <img src="" id="imgChange"/> <div class="buttons"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div><script type="text/javascript"> //定义了几个控件的id和变量 var numx = document.getElementById('numx'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var imgContent=document.getElementById('imgContent'); var dos = document.getElementsByTagName("span"); var imgChange = document.getElementById('imgChange'); //图片的数组 var imgArr = ['img/1.jpg','img/b10.png','img/b9.png','img/b2.png']; var num = 0; var timeL; //图片轮播时左右按钮是隐藏的 prev.style.display='none'; next.style.display='none'; //实现动起来 animate(num); //实现自动跳 play(); //整个轮播图鼠标覆盖上去就暂时停止，移开又继续自动跳 imgContent.onmouseover=stop; imgContent.onmouseout=play; //初始化第一个按钮亮起来的，且第一张图片显示出来 dos[0].className = "on"; //给每一个按钮添加点击事件 for (var i = 0; i < dos.length; i++) { clickdos(i); } //根据点击的按钮的选择按钮的覆盖效果方法 //先循环把所有的按钮都变暗，再给点击的那个按钮覆盖效果 function changebutton(i){ for (var n = 0; n < dos.length; n++) { dos[n].className = ""; } dos[i].className = "on"; } //按钮的点击事件，点到哪个按钮就让该按钮有覆盖效果并且图片和文字也变化 //本来覆盖效果的那个方法可以直接放在这里头，但是因为有后续图片的变换按钮也会跟着有覆盖效果 //所以还是得分开放 function clickdos(i) { dos[i].onclick = function () { changebutton(i); animate(i); } } //动起来 根据num的数字判断图片和文字数组的第num个放出来 function animate(num){ numx.innerHTML = num+1 + '/' + imgArr.length; //数字变化 imgChange.src = imgArr[num]; //图片变化 } //右边按钮的点击事件，num不断增加，当到了最后一个就从第一个重新开始 //并且根据num进行图片文字和按钮的变动，另一个按钮同理 next.onclick = function(){ num++; if(num == imgArr.length){ num = 0; } animate(num); changebutton(num); } prev.onclick = function(){ num--; if(num == -1){ num = imgArr.length-1; } animate(num); changebutton(num); } //定时器2s依次变动，同时左右按钮隐藏 function play(){ timeL=setInterval(function(){next.onclick();},2000) prev.style.display='none'; next.style.display='none'; } //暂停变动，清除定时器，同时左右按钮显示 function stop(){ clearInterval(timeL); prev.style.display='block'; next.style.display='block'; } </script>
更多精彩
