js实现点击图片切换图片时怎么同时也切换背景音乐?

如何也同时切换背景音乐?

 <script>
var a=new Array("images/04.jpg","images/05.jpg","images/06.jpg");
var b=new Array("music/01.mp3","music/02.mp3","music/03.mp3");
var i=0;
var h=0;
var n=0;
var timer;
function f()
{     i++;
     if(i>2){
       i=0;
      }
     document.getElementById("imageId").src = a[i];

    n=0;
    time();


}
function music(){

    h++;
    if(h>2)
        b=0;
    document.getElementById("musicId").src=b[h];



}
function time(){
     imageId.style.opacity=n;
     n=n+0.1;
     timer=setTimeout("time()",500);    
    if(n>=1)
        clearTimeout(timer);



   } 
</script>
<style>
.s1{ font-family:STCaiyun;font-size:60px;background:linear-gradient(30deg,#ff00ff,#00ff00);width:100%;
height:14.5%;font-weight:bold;text-align:center; }
#s2{ margin-top:0.5%; }
</style>
<div class="s1">
<br>Music   Wall
</div>
<div id="s2" >
<img src="images/04.jpg" width="1889" height="727" onclick="f()" onload="time()"  onclick="music()" id="imageId" >
<embed src="music/01.mp3" autostart=true loop=false hidden=true id="musicId" >
</div>


0
cpongo4
昵称4 666
10 个月之前 回复

2个回答

看这个例子:https://download.csdn.net/download/sinoyard/9722120
采纳本回答留下email可以代下

0

图片说明

如图修改代码即可。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js实现点击图片的切换
点击图片切换为另一个图片,再点击后又会变为原来的图片&amp;lt;img src=&quot;images/del.png&quot; id=&quot;img&quot;&amp;gt;&amp;lt;script&amp;gt;var image=document.getElementById('img');image.onclick=function (){var mysrc=image.getAttribute('src');if(mysrc=='image...
如何用js实现点击图片切换为另一图片,再次点击恢复到原图片
如何用js实现点击图片切换为另一图片,再次点击恢复到原图片 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;如何用js实现点击图片切换为另一图片,再次点击恢复到原图片&amp;lt;/title&amp;gt; &am
JS函数之多组图片切换
函数传递参数:参数=JS的数据类型。 遵循的原则:1.尽量保证HTML代码结构一致,可以通过父元素获取子元素;2.把核心主程序通过函数包起来;3.把魅族不同的值找出来,通过传参实现。 以下为多组图片切换的实例。 以上为效果图。左图是通过点击右边方框,实现切换图像。右图是通过鼠标移动到相应方框,来实现切图。
图片和背景颜色一起变换的js切换
通栏适应浏览器切换,比较适用于企业网站,大气美观
js实现图片轮换,大图片下面的一行小div背景图片跟着一起轮换
js实现图片轮换,大图片下面的一行小div背景图片跟着一起变换
用Javascript实现两张图片的切换
通过点击按钮实现两张图片的切换 首先添加一个a链接和和图片 &amp;amp;amp;lt;a id=&amp;amp;quot;link&amp;amp;quot; href=&amp;amp;quot;#&amp;amp;quot;&amp;amp;amp;gt;点击切换图片&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;br&amp;amp;amp;gt; &amp;amp;amp;lt;img id=&amp;amp;quot;img&am
JS实现点击button按钮切换图片
JS实现点击button按钮切换图片 放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础。实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列。 最初的想法是是做一轮播效果,但是刚开始学JS发现有很多问题,所以就做了一个简单的图片切换。 body部分: &amp;lt;body&amp;gt; &amp;lt;h1&amp;gt;...
网页制作用JavaScript实现不同风格的图片切换效果
用JavaScript实现不同风格的图片切换效果只需简单的几个步骤就可以实现。 主要运用效果资源包。
纯JS实现点击多图片切换效果
纯JS实现点击多图片切换效果。 可以插入到你的网页中做用来做网页物资。
使用JavaScript来实现图片的切换
最终实现的效果如图: 设计的思路是这样的:    1.上面的图片个数是变化的,初始化为0  -> num   2.图片要动态的加进去,不是一开始就定好的,通过传递的参数确定,将图片都放到一个数组中去 ->imgArr   3.图片对应的li也是变化的,根据传入的图片的个数来定   4.图片对应的文本也是变化的 textArr   5.事件也是变化的,通过参数传进去 ->evt
通过js实现图片左右点击图片左右切换效果
                                            通过js实现图片左右点击图片左右切换效果 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术: Dreamweaver 通过js实现图片左右点击图片左右切换效果 作...
点击指定的图片变换背景图
h1{   width: 100%;   color: palevioletred;   text-align: center;   }   ul{   width: 100%;   height: 140px;   float: none;   display: block;   position: absolute;   top: 200px;   left: 100p
JS实现图片切换和数字随图片变换
JS实现图片切换和数字随图片变换 1.添加6个圆形数字超链接,鼠标移动到数字区域,切换到数字对应的图片。 鼠标单击左右箭头时,切换图片的同时,图片对应的数字样式是也选中状态。
js图片选择顺序切换和循环切换的功能
图片切换 #box{width:400px;margin:0 auto;} #box>div{text-align: center;margin:10px auto;display: block;} #box div>input{margin-left: 5px;border-radius: 3px;border:1px solid #ccc;} #box>p{text-align: cente
js实现点击图片切换另一图片,再次点击恢复
[code=&quot;java&quot;] function change_pic(){ var imgObj = document.getElementById(&quot;pic&quot;); var Flag=(imgObj.getAttribute(&quot;src&quot;,2)==&quot;1.png&quot;) imgObj.src=Flag?&quot;2.png&quot;:&quot;1.png&quot;; } [/code] 后面的参数2是指其属性。如
JS 实现图片切换的效果
首先看一下效果图,大体这样的,点击左边的按钮,切换图片。 看上去挺简单,但是还是有几个难点的,所以就把这个案例挑出来好好的分析一下。 第一步:布局 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;图片切换器&amp;lt;/title&amp;gt;
点击按钮实现图片的切换
这是一个简单的小的DEMO , 关于点击按钮用于实现图片的切换, 重要的就是里面的关于逻辑的处理, 在以后图片轮播的技术上关于逻辑的处理和这个类似java代码import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.v
js实现图片切换(dom)
setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口); DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;一 DOM介绍 D(文档):可以理解为整个Web加载的...
点击切换图片的底部导航
点击切换图片的底部导航 随着H5的兴起,APP风格的页面成了切页面的日常,写底部导航时,在网上找的没有找到合适的,就自己试着用jQuery实现了一下,希望能有帮助 UI给的切图是这样的,不得不说,很贴心,哈哈哈哈。 实现结果是这样的: 三个tab是一样的,所以这里可以用事件代理,点击事件的添加,有关事件代理的详细信息看这里:https://www.cnblogs.com/liu...
js的判断以及图片的点击切换效果
js的判断知识 1、js中判断的几种类型     1) if( 判断条件  ){                条件成立时,执行里面的语句                条件不成立时,不执行         }     2)if( 判断条件  ){               条件成立时,执行里面的语句         } else{                条件不成立时,
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
html代码: &amp;lt;div class=&quot;detailpwd&quot;&amp;gt; &amp;lt;div class=&quot;remempwd&quot; &amp;gt; &amp;lt;img id=&quot;remcheckbox&quot; src=&quot;../images/remempwd1.png&quot; /&amp;gt; 记住密码&amp;lt;/div&amp;gt; &amp;lt;
菜单栏的水波纹效果
1.菜单栏点击产生水波纹效果,代码如下: 原生js实现水波纹效果 .container { width: 600px; height: 600px; margin: 0 auto; text-align: center; } .menu { width: 480px; padding: 0; margin: 40px auto; position
Javascript定时切换图片的轮播实现
JS中有一组定时函数 1.setInterval(functionName, interval):设置定时间隔interval,并调用相应的函数functionName。 2.clearInterval(timer):清除定时间隔功能,也就是停止。   这里有一个轮播的小例子。 requirement:进入该页面,每隔两秒切换一个图片,也就是轮播功能。当click左边的小图片,右侧显...
用javascript实现图片的切换
先把相应的图片路径添加到存储图片路径的数组imgArr里,之后运行代码就可以实现图片的切换了 以下是代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;         &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;         &amp;lt;!
使用JavaScript点击事件切换图片
&amp;lt;body&amp;gt;     &amp;lt;div id=&quot;mydiv&quot;&amp;gt; &amp;lt;img src=&quot;img/LIGE.jpg&quot;width=&quot;200&quot; height=&quot;150&quot; title=&quot;我是LIGE&quot;/&amp;gt; &amp;lt;img src=&quot;img/1480988130963.jpeg&quot; width=&quot;200&qu
js简单实现图片切换效果
js简单实现图片切换效果 body{ margin: 0; padding: 0; } .adbody{ width:100%; height:100%; } .adPanel{ width:100%; height:100%; } var count =
DOCTYPE! HTML PUBLIC 声明规范: HTML 4.01 / XHTML 1.0 / XHTML 1.1 DTD
摘自:Fix Your Site With the Right DOCTYPE!: A List Apart DOCTYPE的常用声明:按照 HTML 4.01 XHTML 1.0 XHTML 1.1 列表...
Jquery实现图片切换的三种方法
获取数字的背景颜色 ,切换图片的按钮的背景颜色和实现按钮图片替换。 function back(num){ $(&quot;.adver&quot;).css({&quot;background&quot;:&quot;url('images/adver0&quot;+num+&quot;.jpg')&quot;}) $(&quot;li&quot;).css({&quot;background&quot;:&quot;black&qu
JavaScript实现图片切换
实例代码如下: 1 JS 代码: &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; //页面加载后加载JS    window.onload=function(){        //获取文档元素        var pre=document.getElementById(&quot;btn1&quot;);        var nex=document.getElementById...
js中图片无缝切换的两种方法
第一种:只适应于可视区只有一个元素的时候,例如整屏切换效果。下面我写的是自适应屏幕宽度的轮播图实现步骤:1、屏幕自适应的处理:当屏幕大小大于1000的时候,让图片居中,解决办法是,用图片的宽度减去可视区的宽度,整体除以2,来实现图片的居中2、图片的轮播切换(此处,主要需要解决的问题是想办法是改变第一个元素的定位)当然我们都很清楚,实现图片的自动轮播切换,一定离不了的是定时器,下面我就写我的实现步骤...
js按钮图片显示,点击按钮切换图片
var var_insert_button_html = '&amp;lt;p style=&quot;text-align: center;&quot;&amp;gt; &amp;lt;img id=&quot;btn_' + row_no + '&quot; src=&quot;ext/icon_image/down1.png&quot; width=&quot;25px&quot; height=&quot;25px&quot; alt=&quot;picture is missing&quot; n
JavaScript实现简单的图片轮播(通过点击数字切换)
最终实现效果图 点击下标切换到该图片上 代码块<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 }
js点击按钮更改html页面的图片(两个来回换)
点击换图片 function change() { var x = document.getElementById("image").getAttribute("src"); if (x=="111.png"){ document.getElementById("image").src="222.png";
JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
前天帮祥哥他女票做个网页作业,大概要求就是使用两个按钮控制图片的切换,在页面右上角出现一个图片按钮,点击这个按钮出现下拉菜单。 第一个要求还是很简单的,第二个多花了我几个小时的时间,因为我只做过select下拉菜单,这种使用图片按钮的还真没整过。不过后来找到一种方法就是对下拉菜单单独放置一个div,设置style=”display:none”,当点击图片按钮的时候更改style=”display:
jQuery初体验—实现左右切换图片
前言 众所周知,jQuery是目前使用最广泛的javascript函数库。所以了解并学习是非常重要的,在javascript的学习过程中需要大量代码才能实现的效果,使用jQuery会使得一切简单很多,和CSS结合可以实现很多炫酷的页面效果,写得少,做得多不就是每个程序员所追求的吗? jQuery相对原生JS是比较简单的,javascript语言的基本知识,就能看懂它,也能够很好的应用。目前,j...
JS 使用节点的方式实现切换背景图片
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; * { margin: 0px; padding: 0p
js 图片切换 上一张下一张效果
js 图片切换 点击切换上一张下一张效果
jq实现点击容器实现2张图片切换(改变src路径)
实现点击一个容器实现图片切换的方法有很多,本篇为使用jquery实现点击图片,实现在2张图片来回切换。思路为: 1.点击某个容器触发事件,事件对要处理的目标进行判断。 2.判断如果当前某处的图片的src等于要切换的图片的src,则让src等于第二张图片的路径。 3.如果当前判断的图片与第一张图片的src不同,则让做判断的图片等于第一张图片。   代码如下: $('.createbox').
点击某个按钮切换图片、文字描述(按钮颜色跟着改变)(简化代码)
html:<div id="pic"> <img src="img/1.jpg" alt=""> <span>数量正在加载...</span> <p>文字正在加载...</p> <ul></ul><!-- 动态插入li标签,右边栏小方框--> </div>css:body {background-color: #333;} ul {padding: 0;margin:
vue.js使用select切换图片
div id="app"> div class="pic"> img :src=imgsrc> div> 第1张第2张第3张 option无法添加事件--> select v-model="selected" @change="changeimg(parseInt(selected))"> option value="1">第一张o