js实现鼠标切换图片（无定时器）

本文实例为大家分享了js实现鼠标切换图片的具体代码，供大家参考，具体内容如下

实现效果，可以利用鼠标移动在对应的小点点上，或者点击左右两侧的箭头切换图片，并在图片的上方显示出图片的页数，下方显示出对应图片的标题。

全部代码如下：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>图片切换</title><style>.picture {position: relative;width: 500px;height: 333px;margin: 0 auto;border: 2px solid rgb(231, 127, 217);overflow: hidden;}.radius {width: 100%;height: 10px;position: absolute;bottom: 30px;text-align: center;}.pg {     //图片上方页码position: absolute;margin: 0;width: 100%;height: 20px;background-color: rgba(0, 0, 0, .4);text-align: center;font-size: 16px;font-weight: 600;color: #fff;}.title {position: absolute;width: 100%;bottom: 0px;text-align: center;font-size: 16px;font-weight: 600;color: rgb(21, 223, 72);}span {display: inline-block;border: 10px solid #fdfdfd;border-radius: 50%;}.active {border: 10px solid #656466;}/* 左右箭头 */.arrowhead-left,.arrowhead-right {position: absolute;width: 41px;height: 69px;font-size: 30px;line-height: 70px;text-align: center;color: #D6D8D4;background-color: rgba(0,0,0,.3);}.arrowhead-left {left: 0;top: 40%;}.arrowhead-right {right: 0;top: 40%;}</style></head><body><div class=\"picture\"><!-- 图片页码 --><p class=\"pg\">封面</p><img src=\"./image/d8.jpeg\" alt=\"\"><!-- 小圆点点 --><p class=\"radius\"></p><!-- 图片的下面标题 --><p class=\"title\">标题</p><!-- 左右箭头 --><div class=\"arrowhead-left\" id=\"al\"> < </div><div class=\"arrowhead-right\" id=\"ar\"> > </div></div><script>var address = [\"./image/d1.jpeg\", \"./image/d2.jpeg\", \"./image/d3.jpeg\", \"./image/d4.jpeg\", \"./image/d5.jpeg\", \"./image/d7.jpeg\"];// var imgs = document.getElementsByTagName(\"img\");var imgs = document.querySelector(\"img\");var len = address.length;var str = \"\";var pp = document.getElementsByTagName(\"p\");//获取的是一个集合// var pp = document.querySelector(\"p\");  //获取的是一个元素var al = document.getElementById(\"al\");var ar = document.getElementById(\"ar\");//添加span标签for (i = 0; i < len; i++) {str += \' <span></span>\'}console.log(str);console.log(pp);pp[1].innerHTML = str;var spans = pp[1].getElementsByTagName(\'span\');spans[0].className = \'active\';for (i = 0; i < len; i++) {spans[i].index = i;spans[i].onmouseover = function () {  //所有圆点的类为空for (i = 0; i < len; i++) {spans[i].className = \"\";}this.className = \'active\';      //给点击的span（圆点）添加类名imgs.src = address[this.index];pp[0].innerHTML = [this.index + 1] + \"/6\";pp[2].innerHTML = \"风光\" + [this.index + 1];}}var n = 0 ;ar.onclick = function () {for (i = 0; i < len; i++) {spans[i].className = \"\";}spans.className = \"active\";imgs.src = address;pp[0].innerHTML = (n+1) + \"/6\";pp[2].innerHTML = \"风光\" +(n+1);if (n<5) {n++;}else {n=0;}}al.onclick = function () {for (i = 0; i < len; i++) {spans[i].className = \"\";}spans.className = \"active\";imgs.src = address;pp[0].innerHTML = (n+1) + \"/6\";pp[2].innerHTML = \"风光\" +(n+1);if (n>0) {n--;}else {}n=(len-1);}}</script></body></html>

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

您可能感兴趣的文章: