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[n].className = "active";imgs.src = address[n];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[n].className = "active";imgs.src = address[n];pp[0].innerHTML = (n+1) + "/6";pp[2].innerHTML = "风光" +(n+1);if (n>0) {n--; }else {}n=(len-1);}}</script>
</body></html>

JS 利用鼠标切换图片（无定时器）相关推荐

HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...
Python OpenCV：利用滚动条移动图片，利用鼠标缩放图片
Python OpenCV:利用滚动条移动图片,利用鼠标缩放图片一.实现目标二.实现背景三.实现方法四.运行环境五.运行代码六.运行结果七.不足八.参考一.实现目标在OpenC ...
html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法
本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 鼠标触发图片抖动效果 .shakeimage{ position:relative } //configur ...
js按钮实现切换图片效果
通过JavaScript设置按钮功能实现点击按钮切换上一张.下一张图片.(具体实现代码在图片后面). 浏览器实现效果: 实现代码: <!DOCTYPE html> <html lan ...
js实现鼠标悬浮图片放大预览
先上效果图: 鼠标悬浮直接大图浮现! 首先css代码: .big {overflow: hidden;display: none;position: absolute;top: 100px;left: ...
js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
js 解决页面切换时，定时器setInterval 会变得越来越慢
在项目中经常会用到自定义动画或者自定义一些无缝滚动什么的,需要用到js中的定时器setinterval,但是,楼主发现在项目中测试的时候,切换页面或者浏览器上面的页签时,定时器明明没有收到干扰,但是页 ...
js 解决页面切换时，定时器setInterval会变得很慢，有时候不执行的问题
通过浏览器窗口焦点事件,清掉定时器 window.onfocus=function(){timer=setInterval(autoRun,1000); }window.onblur=function ...
JS利用Canvas实现图片等比例裁剪、压缩
最近在做一个政务类的移动端H5项目,用户体量达百万级别,有一个模块中有上传图片反馈的功能,由于各个手机产商拍照的像素值的都不一样,后台去浏览这个图片的时候就出现大小不一的情况,另外有些图片并不需要上传 ...

JS 利用鼠标切换图片（无定时器）

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

JS 利用鼠标切换图片（无定时器）相关推荐

最新文章

热门文章