JS写的将鼠标放到数字上就能换图片…

最新推荐文章于 2023-01-11 08:00:00 发布
最新推荐文章于 2023-01-11 08:00:00 发布
阅读量2.1k 收藏 4
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hww9011/article/details/20544723
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>JS写的将鼠标放到数字上就能换图片和点击图片就能换图片</title>
    <style type="text/css">
        #main
        {
            width: 100%;
            border: 1px solid #000;
            height: 600px;
        }
        #middle
        {
            margin: 100px auto;
            padding: 0px;
            border: 1px dashed #ff0000;
            width: 400px;
            height: 200px;
        }
        #a1
        {
            height: 173px;
            width: 398px;
            border: 1px solid #000;
        }
        #a2
        {
            height: 24px;
            width: 398px;
            border: 1px solid #000;
            border-top: 0px;
            background-color: #eee;
        }
        #ul_1 li
        {
            float: right;
            text-align: center;
        }
        .but
        {
            width: 60px;
            height: 24px;
            color: red;
            font-size: 12px;
            text-align: center;
            border: 0px solid #ff0000;
            background-color: #eee;
        }
        .selecte1
        {
            position: absolute;
            cursor: pointer;
            _background: none;
        }
    </style>
    <script type="text/javascript" language="javascript">
        function link_1() {
            document.getElementByIdx_x("img1").src = "image/selecte.png"
            document.getElementByIdx_x("img2").src = "image/unselecte.png"
            document.getElementByIdx_x("img3").src = "image/unselecte.png"
        }
        function link_2() {
            document.getElementByIdx_x("img2").src = "image/selecte.png"
            document.getElementByIdx_x("img1").src = "image/unselecte.png"
            document.getElementByIdx_x("img3").src = "image/unselecte.png"
        }
        function link_3() {
            document.getElementByIdx_x("img3").src = "image/selecte.png"
            document.getElementByIdx_x("img1").src = "image/unselecte.png"
            document.getElementByIdx_x("img2").src = "image/unselecte.png"
        }
    </script>
</head>
<body>
    <form name="form1" runat="server">
    <div id="main">
        <div id="middle">
            将鼠标放到数字上就能换图片和点击图片就能换图片。
            <div id="a1">
                <img src="image/selecte.png" id="img1" class="selecte1" οnmοusedοwn="link_1()" />
                <br />
                <img src="image/unselecte.png" id="img2" class="selecte1" οnmοusedοwn="link_2()" /><br />
                <img src="image/unselecte.png" id="img3" class="selecte1" οnmοusedοwn="link_3()" /><br />
            </div>
            <div id="a2">
                <ul id="ul_1">
                    <li>
                        <input type="button" value="Three" class="but" οnmοusemοve="link_3()" /></li>
                    <li>
                        <input type="button" value="Two" class="but" οnmοusemοve="link_2()" /></li>
                    <li>
                        <input type="button" value="One" class="but" οnmοusemοve="link_1()" /></li>
                </ul>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

姓名不能为空
关注
专栏目录
js图片预加载---for与onload事件，图片数据模型到界面的单项绑定，使用interval模拟循环操作
MIKUScallion的专栏
03-24 3876
<!-- --> <html> <head> <title></title> <meta charset="utf-8"> <script src="imgloader.js"></script> </head> <body id ="body"> <!-- <button id="sto
html鼠标移动到图片上显示冒泡框,Bootstrap 教程 - 提示冒泡(Tooltip)
weixin_39965881的博客
06-08 1160
提示冒泡(Tooltip)使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例，用于本地标题存储的动画和数据属性。概览使用提示冒泡持件时应了解以下：Tooltip提示冒泡组件依赖于 Popper.js ，你必须将popper.min.js 文件放在 bootstrap.js之前调用，或者使用 bootstrap.bundle.min.js / bootstra...
JS实现图片切换和数字随图片变换
12-04
JS实现图片切换和数字随图片变换 1.添加6个圆形数字超链接，鼠标移动到数字区域，切换到数字对应的图片。 鼠标单击左右箭头时，切换图片的同时，图片对应的数字样式是也选中状态。
每3秒轮换下一张图片，鼠标可以选中数字换图片，在网上找了好多js写的代码，但是粘上之后总是实现不了效果，这是完整代码，粘上之后完全能使用，方便大家使用（这是jquery实现的翻动功能，需要先下载个jq
caoyaqi的博客
09-16 1257
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">       http://sdia.ncut.edu.cn:80/" />     大规模流数据集成与分析技术北京市重点实验室                  *{ font-size:12px
js基础【在输入框写数字 显示对应的图片】
姗姗的博客
07-06 3780
<body> <input type="text" id="inp"><input type="button" value="切换" id="btn"><br> <img src="img/1.jpg" alt="" id="pic"> <p id="txt">显示的是img/1.jpg</p> <s...
带数字的图片滚动的js例子
08-19
图片的滚动，带数字的图片切换，无风险滚动的。
js实现当鼠标移到表格上时显示这一格全部内容的代码
11-22
通过这段JavaScript代码，我们实现了当鼠标移到表格单元格上时，显示单元格完整内容的功能。当鼠标离开时，提示框会自动隐藏。这种方法不仅避免了使用额外的插件，还能灵活地适应各种表格布局，提供了一种优雅的用户...
JS特效实现图片自动播放并可控的效果
10-23
在本文中，我们将探讨如何使用JavaScript来实现图片的自动播放功能，并且这个功能是用户可控的。这意味着图片轮播器不仅可以在设定的时间间隔内自动切换显示图片，而且用户可以通过交互操作，如点击按钮或鼠标悬停来...
视频播放时鼠标移到进度条上会有缩略图,这是怎么实现的. 其实很简单
12-14
在视频播放过程中，当鼠标悬停在进度条上时出现的缩略图功能，被称为预览缩略图或时间线快照。这个功能为用户提供了一种直观的方式，快速浏览视频内容，了解不同时间点的画面。实现这一功能并不复杂，主要涉及以下几...
鼠标放上去背景图片放大显示的Flash动画.rar
07-10
"鼠标放上去背景图片放大显示的Flash动画"是一个典型的交互效果，常用于网站设计中，让用户在悬停鼠标时能更清晰地查看图片细节。这个效果利用了Adobe Flash软件的编程功能，通过ActionScript脚本实现动态效果。 ...
JS鼠标经过图片文字变化特效.zip
07-04
JS鼠标经过图片文字变化特效
js数字增长效果
05-19
js数字增长效果
点击数字按钮实现切换图片效果
01-05
通过点击带数字的按钮切换图片，同时图片会自动切换
利用Javascript输出多个图片
Sunsun1114的博客
02-14 1891
利用Javascript中语法输出多个图片
js显示多张图片的问题
球球之家
12-05 1923
闲来无事，自己敲了段js，发现诸多问题，暂不得其解：     New Document             //或者在body里加个onload方法 window.onload=function(){ var num=prompt("您打算显示多少张图片","")-0; for(var i=1;i var im=document.createE
JS:用户输入整数。如果输入的是1〜6 的整数，则程序输出:your nu....
NY_21的博客
01-11 447
题目：用户输入整数。如果输入的是1〜6 的整数，则程序输出:your number is in 1〜6. c=（用户输入的数） 如果输入的是其它数字，输出:Your number is too large. c=（用户输入的数）
随机显示图片的JS代码
Coding
12-18 3145
关于随机显示图片的代码很多，但有的只能在IE下才有效果，如果换在Firefox或其他浏览器下就会失去效果，能做到两全的JS真的很少，今天给大家介绍一个很简单的JS随机显示图片的代码。 以下是代码: // JavaScript Document var m=10; //随机显示图片的总数量 var n=Math.floor(Math.random()*m+1) document.write ("")
JavaScript实现简单的图片轮播（通过点击数字切换）
热门推荐
lettle_redhat的博客
08-21 1万+
最终实现效果图 点击下标切换到该图片上 代码块<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 }
设置轮播图，（1）自动播放、鼠标移到图片上停止播放；（2）点击中间的数字球，转到对应的图片上，数字球变成红色，鼠标从数字球上移走后，图片从刚才位置开始轮播。
最新发布
06-10
你可以使用 HTML、CSS 和 JavaScript 来实现这个效果。首先，在 HTML 文件中创建一个容器，用于包含所有的图片和数字球： ```html <div id="slider"> <div class="images"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <div class="controls"> <span class="control active"></span> <span class="control"></span> <span class="control"></span> </div> </div> ``` 然后，在 CSS 文件中，设置容器和图片的样式： ```css #slider { width: 600px; height: 400px; position: relative; overflow: hidden; } .images { width: 1800px; height: 400px; position: absolute; left: 0; top: 0; } .images img { width: 600px; height: 400px; float: left; } ``` 接下来，在 JavaScript 文件中，创建一个数组来存储所有的数字球，并使用循环语句生成这些元素： ```javascript // 创建数字球并添加到容器中 var slider = document.getElementById("slider"); var controls = []; for (var i = 0; i < 3; i++) { var control = document.createElement("span"); control.className = "control"; if (i === 0) { control.className += " active"; } slider.appendChild(control); controls.push(control); } ``` 然后，定义一个变量来存储当前显示的图片的索引： ```javascript // 当前显示的图片的索引 var currentSlide = 0; ``` 接下来，使用定时器实现自动播放和数字球的变化： ```javascript // 自动播放和数字球的变化 var timer = setInterval(function() { currentSlide++; if (currentSlide >= 3) { currentSlide = 0; } updateSlider(); }, 3000); function updateSlider() { // 显示对应的图片 var images = document.querySelector(".images"); images.style.left = (-currentSlide * 600) + "px"; // 更改数字球的样式 for (var i = 0; i < controls.length; i++) { controls[i].classList.remove("active"); } controls[currentSlide].classList.add("active"); } ``` 最后，为数字球添加点击事件监听器，使用户能够点击数字球切换图片： ```javascript // 点击数字球切换图片 for (var i = 0; i < controls.length; i++) { controls[i].addEventListener("click", function() { clearInterval(timer); currentSlide = Array.prototype.indexOf.call(controls, this); updateSlider(); timer = setInterval(function() { currentSlide++; if (currentSlide >= 3) { currentSlide = 0; } updateSlider(); }, 3000); }); } ``` 以上代码会让图片自动轮播，当鼠标移到图片上时停止自动播放，当鼠标从数字球上移开时恢复自动播放。用户也可以点击数字球切换图片，当鼠标从数字球上移开时继续自动播放。你可以根据需要调整定时器的间隔和容器、图片、数字球的大小和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值