js案例：广告轮播图（onmouseover）(onmouseout)用法

最新推荐文章于 2024-06-17 15:29:34 发布
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量386 收藏
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Abander/article/details/122931310
版权
本文介绍了如何使用JavaScript和HTML创建一个广告轮播图，通过onmouseover和onmouseout事件实现鼠标悬停时停止轮播，移开时继续轮播的效果。提供了一段完整的源码示例，包括HTML结构、CSS样式和JavaScript逻辑。轮播图图片切换每2秒自动进行，支持图片数组的定义。
摘要由CSDN通过智能技术生成

提示：使用鼠标移入(onmouseover)鼠标移出(onmouseout)

 

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

         div{

            margin: 0 auto;

            width: 524px;

            height: 190px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div οnmοuseοver="stop()" οnmοuseοut="start()&#

最低0.47元/天 解锁文章
Abander
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 函数 轮播图案例
weixin_45810135的博客
10-04 224
函数是命名的独立的语句段，这个语句段可以被当作一个整体来引用和执行： 格式： function 函数名(形式参数){函数体} 调用函数：函数名(实际参数); //声明一个函数 function get(a,b){ console.log(a,b) } get(3,4)//调用 注意： 1、函数只有被调用后才会执行 2、如果函数需要返回值、直接使用return 返回 <script type="text/javascript"> // 定义一个函数 : function f
JS—函数实现轮播图
LSQ_2584951836的博客
08-20 261
简单轮播图案例 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
原生js实现轮播图的两种方式
最新发布
h395910638的博客
06-17 580
element-ui组件库中，有一个Carousel走马灯组件，也就是我们平时说的轮播图，为了搞清它的实现原理，接下来我们使用原生js实现一个轮播图效果
利用函数制作简单的轮播图
weixin_34007886的博客
11-29 91
2016年11月29日，星期二 一、样式代码：样式图：二、设置DIV（left，center，right），script，JS链接：三、函数代码： 四、完成图：...
JS学习构造函数版轮播图
u011277123的博客
12-13 679
沧桑肥肥 2016-12-01 09:42 【1】轮播图构造函数版 function Mytab(id,duration) { //获取元素 this.duration = duration || 2000; this.oBox = document.getElementById(id); this.oBoxInner = this.oBox.getElementsByTagN
利用函数递归实现简单的轮播图效果
weixin_30698527的博客
05-19 151
利用递归实现简单的轮播图效果 对于初学者而言，提到轮播图，首先想到到的是利用for循环和定时器来实现图片的循环播放，但是实践证明，在for循环中使用定时器并不能实现图片之间的过度和图片的循环播放。那么轮播图该怎样实现呢？ 在js中，递归实际也是一种循环，而且如果不设置限制条件，递归是一个死循环。 递归函数就是在函数内部调用函数自身。 下面就用递归函数做一个简单的轮播图。 首先创建一个ht...
js案例-点击+电灯开关+轮播图+动态表格+表格全选+登录表格验证
weixin_44325370的博客
12-15 225
案例 1.点击 <body> <img id="light" src="img/off.gif" onclick="fun();"> <img id="light2" src="img/off.gif"> <script> function fun(){ alert('我被点了'); alert('我又被点了'); } function fun2()
JAVAWEB复习知识五：JAVASCRIPT案例-99乘法表、电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单检验
weixin_45246666的博客
10-16 193
一、99乘法表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <style> td{ border: 1px solid; } </style> <script> doc
HTML/CSS/JS实现二级菜单导航+轮播图
热门推荐
轻风起自远东
02-05 1万+
学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下： 首先来说说这个项目中用的比较多的知识点： CSS定位——绝对定位和相对定位的搭配使用，用的非常多 JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能 div块标签 首先是整个页面
javaScript常用案例
张张张张张高高的博客
09-06 8984
前端页面开发之javaScript常用案例
javascript实现轮播效果示例
02-15
利用js实现轮播效果 其中封装了一个简单的匀速动画函数
JavaScript 广告图片轮播 JS
04-24
自己写的JS<br>可以用于网站首页的广告图片轮播<br>彷淘宝商城的风格
javascript中onmouseover事件实例
网行天下(WangGou7.COM)
02-25 2531
     var currid=0;  var preid=0;    function showlayer(obj)  {   if(preid!=0)   {    var prediv=document.getElementById("type"+preid);    prediv.style.display="none";   }      currid=obj.id;   var c
【转】onmouseout 等一系列事件的用法简单举例
sl159的专栏
09-05 1090
onmouseout、onmouseover、onkeydown、onkeyup、onkeypress等事件。 onmouseout 事件，会在鼠标指针移出指定的对象时发生。 实例 1 在下面的例子中，我们将在鼠标指针移出图像时显示一个对话框： <img src="/i/example_mouse2.jpg" alt="mouse" onmousemove="alert('您的鼠标刚才离
通过JS实现轮播图
什么最重要？算法！！
10-11 1125
博客参考： 1、http://blog.csdn.net/a2011480169/article/details/76218022 （绝对定位和相对定位） 2、轮播图 http://www.jb51.net/article/94598.htm 3、定时器和计时器 http://blog.csdn.net/a2011480169/article/details/76706014 效果展示
js函数 轮播图-自动切换
姗姗的博客
07-09 801
<!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-Compa...
JavaScript之轮播图运动函数
qq_44531034的博客
04-02 237
var oDiv=document.querySelectoe('div'); var oBtn=document.querySelector('button') function move(ele，obj){ //先通过for...in循环，来调用参数2，获取其中的执行属性和目标位置的数值 //目前是obj中，有一个单元会循环一次，生成left方向的定时器 //如果obj中，有多个单元，会循环多...
JS特效之广告轮播图（带定时器）
cindy647的博客
07-12 2141
轮播图是网页中常见的JS特效，最近学习实现了一个基础的轮播图（基于HTML+CSS+Javascript）,目前感觉功能已经比较全面了，示例的效果图如下： 基本的功能如下： 1、每隔一段时间（可自由设置）图片自动轮换，循环播放 2、右下角小图标根据显示的图片序号依次点亮（变黄色） 3、鼠标移入图片内，显示左右两侧的<>图标，停止自动轮换，点击图片实现移动到上一张/下一张；...
onmouseover和 onmouseout的用法以及案例
05-30
在这个例子中，`onmouseover` 和 `onmouseout` 事件都被绑定到了按钮上，当鼠标移动到按钮上时，`onmouseover` 事件会触发，按钮的背景颜色会变成红色；当鼠标离开按钮时，`onmouseout` 事件会触发，按钮的背景颜色...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值