js鼠标移入移出显示不同图片_一个用js撸的轮播图.

最新推荐文章于 2022-06-30 14:03:38 发布
最新推荐文章于 2022-06-30 14:03:38 发布
阅读量991 收藏
点赞数 1
文章标签： js鼠标移入移出显示不同图片 怎样更改轮播图前进后退按钮的样式

78c67c81532cf3ccad67cb2b5cb3d25d.png

前几天在知乎看到,前端面试要求手撸一个轮播图正常吗,我感觉不难,用了脑子里的一点js知识开干了.

我是在校学生,仅仅上了十几个学时的js吧,课外没有偷偷补课~

其实我是讨厌js这种弱类型语言的,感觉一点都不可靠,所以没有过多的学习.

代码js部分有一百五十行了,用jq的话要少非常非常多,但是我的目的就是看看"手撸一个轮播图过分吗",结论是,很正常,没有逻辑困难,只有编程困难,至少当场说出实现逻辑是没有任何困难的.

先看看效果，录屏有点麻烦，手机录像一样的可以看出效果，就直接手机录像了：

4c2ca2cf347ec49f6e092d451e06e153.png
演示视频https://www.zhihu.com/video/1124653783925456896

代码如下:

<!DOCTYPE html>

我是在校学生,没有项目经历,写的不好的地方还请指出我会加以修正~

对了，要运行起来看看的话，需要在代码上一级文件夹里建一个images文件夹里放上图片，看看HTML代码部分就知道啦。实在还是不会的可以评论下，我发个压缩包出来看看。

谢谢!

weixin_39768247
关注
echarts世界地图组件轮播、鼠标移入移出事件
weixin_38949279的博客
09-19 2010
【原因】：出现问题的是美国、法国，发现原来在地图上还有很小很小很小的位置，比较难发现。【解决】：翻文档发现,position使用回调函数的形式，return它的坐标即可。【问题】：地图在轮播的时候toolTips的位置显示不正确。
swiper移入暂停_用Swiper插件实现无缝轮播的品牌展示，鼠标移动停止，鼠标移出无缝移动视觉效果...
weixin_39726971的博客
12-20 1072
正常操作，正常分析，大家好，我是D1n910。文章关键词： 技术 前端JQuery 入门 滚动文章前言：公司要求做官网呀呀呀，其中有一部分设计是要求我们最亲爱的品牌商的LOGO能够在底部无缝轮播，鼠标移上去就停下来。效果如下：一、使用插件介绍1、使用的框架是JQuery，因为讲究快速、兼容、展示，所以没有用vue、react之类的看起来高大上的框架。2、使用的是优秀的轮播插件Swiper3.0版...
js 实现 鼠标放到图片上会显示另外一张图片
03-31
js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
今天又写了个鼠标划过显示不同图片的JS
网页设计师
03-24 1255
div{ width:300px; overflow:hidden; float:left; } dl{ width:60px; float:left; margin:0px; } dd{ margin:0px; } img{ width:300px; height:53px; } --> span{ display:block; width:5000%;
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
10-29
其实我想实现的只是大图预览，不需要太复杂。后来，在原来有的javascript资料里找到这个:)“JavaScript网页设计300例.chm”，从里面找到了类似的下拉菜单的例子修改了一下，以实现这个功能。
js实现的鼠标放上和移开显示不同图片和文字，样式比较好看
ayangjing的专栏
06-21 2807
效果图：   代码如下： *{ margin:0; padding:0; } #container{ height:auto; width:553px; border:1px solid #ccc; position:relative; margin:100px auto; } #content{ height:266px; width:400px; position:relat
jq无缝轮播 鼠标移入停止，移出滚动.zip
01-12
【标题】"jq无缝轮播 鼠标移入停止，移出滚动.zip"涉及到的是网页设计中的一个常见功能——使用HTML和jQuery实现的无缝轮播图效果，它具有交互性，即当鼠标移入轮播图时停止自动滚动，鼠标移出时恢复滚动。...
js实现自动轮播图选项卡效果（光标移入暂停）.pdf
12-16
同时，我们可以使用 `addEventListener` 函数来监听鼠标移入和移出事件，从而暂停或恢复自动轮播图效果。 在 JavaScript 代码中，我们可以使用 `querySelector` 函数来获取容器、图片列表和导航点列表等元素，并...
小米官网轮播图效果 自动轮播 鼠标移入移出 小圆点
坚强的博客
06-30 261
小米官网轮播图效果 自动轮播 ，鼠标移入移出轮播继续停止， 小圆点跟随变化
JS鼠标滑过图片时切换图片实现思路
10-26
在浏览网页时会看到这样的效果：当鼠标滑过一张图片后，这张图片切换为了另外的一张图片，下面为大家介绍下具体是如何实现的，感兴趣的朋友不要错过
js 鼠标移动显示图片的简单实例
10-26
本篇文章主要是对js鼠标移动显示图片的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
js完美实现鼠标经过图片显示文字
03-23
js完美实现鼠标经过图片显示文字，当用户经过图片时，在图片上层显示相关文字
鼠标悬停和离开显示不同的图片
lengxin337的专栏
03-02 1507
品牌定位             微信营销平台开发服务商                         $(".index_part6_ul li").hover(function(){  $(this).find(".index_part6_ul_img1").css('display','none'); $(this).find(".index_part
原生js轮播图之鼠标事件显示对应图片
voice的博客
11-14 1076
前言 自己写了个轮播，感觉还可以，拿来练手不错，遂记录下来。 首先看下动态图： 全部代码 <!DOCTYPE html> <html> <head> <title>原生js轮播图之鼠标事件显示对应图片</title> <meta charset="utf-8"> <style type="text/css"&gt...
简单的js照片切换效果和鼠标移入显示
weixin_44541213的博客
01-19 1095
我们可以看到下面的效果图 ，怎样去实现点击左右按钮和小按钮进行照片切换，我们看一下下面的截图 &lt;div class="showbox" id="showbox"&gt; &lt;div class="imgbox" id="imgbox" style="left: 0px;"&gt; &lt;img src="../images/16.jpg&quo
js 鼠标移动显示图片
东亮博客
11-29 2584
 1.js代码 //***********默认设置定义.*********************tPopWait=50;//停留tWait豪秒后显示提示。tPopShow=5000;//显示tShow豪秒后关闭提示showPopStep=20;popOpacity=99;//***************内部变量定义*****************sPop=
JavaScript中鼠标移动加上相应的图片
plannothing的博客
08-15 578
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 2000px; } #box01{ width: 100px; height: 100px; background-color: red; /* * 开启box01的绝对定位 */ .
JS实现鼠标移上图片显示、大图显示
hcb0825的博客
07-27 2523
<br /> function showPic(sUrl){ <br />var x,y; <br />x = event.clientX; <br />y = event.clientY; <br />document.getElementById("Layer1").style.left = x; <br />document.getElementById("Layer1").style.top = y; <br />document.getElementById("Layer1").innerHTML
js轮播图鼠标移入停止
最新发布
05-19
可以通过监听鼠标移入和移出事件，来控制轮播图的播放和停止。具体实现方法如下： 1. 获取轮播图元素和图片数量 ```javascript var slider = document.querySelector('.slider'); var imgs = slider.querySelectorAll('img'); var imgNum = imgs.length; ``` 2. 定义轮播函数和定时器 ```javascript var index = 0; // 当前图片下标 var timer = null; // 定时器 function changeImg() { for (var i = 0; i < imgNum; i++) { imgs[i].style.display = 'none'; // 隐藏所有图片 } imgs[index].style.display = 'block'; // 显示当前图片 index++; // 切换到下一张图片 if (index >= imgNum) { index = 0; // 切换到第一张图片 } } timer = setInterval(changeImg, 2000); // 每隔2秒切换一次图片 ``` 3. 监听鼠标移入和移出事件 ```javascript slider.addEventListener('mouseover', function() { clearInterval(timer); // 鼠标移入时停止轮播 }); slider.addEventListener('mouseout', function() { timer = setInterval(changeImg, 2000); // 鼠标移出时继续轮播 }); ``` 完整代码如下： ```html <div class="slider"> <img src="img1.jpg" alt=""> <img src="img2.jpg" alt=""> <img src="img3.jpg" alt=""> </div> ``` ```javascript var slider = document.querySelector('.slider'); var imgs = slider.querySelectorAll('img'); var imgNum = imgs.length; var index = 0; var timer = null; function changeImg() { for (var i = 0; i < imgNum; i++) { imgs[i].style.display = 'none'; } imgs[index].style.display = 'block'; index++; if (index >= imgNum) { index = 0; } } timer = setInterval(changeImg, 2000); slider.addEventListener('mouseover', function() { clearInterval(timer); }); slider.addEventListener('mouseout', function() { timer = setInterval(changeImg, 2000); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值