js如何实现点击切换图片(js点击更换图片)
如何用js实现点击图片切换另一图片，再次点击恢复？
方法如下
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"
title/title
/head
body
script ? ?
window.onload=function(){
var?Imgbtn=document.getElementById('btn');
var?Img=document.getElementById('img');
Imgbtn.onclick=function(){
if(Img.src=='')????????????{ ? ? ? ? ?
Img.src='';
}else{
Img.src=''
}
}
}
/script
div?id="bg"
div?id="btn"
div?id="txt"试客小兵/div
img?id="img"?src=""
/div
/div
/body
/html
扩展资料
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
直译语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}︰
Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。
与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。
参考资料：百度百科?JavaScript编程
js如何点击左右按钮切换图片
这样：
!DOCTYPE html
html
head
meta charset="UTF-8"
title动态切换图片/title
/head
style
ul{
padding:0;margin:0;
}
li{
list-style: none;
}
#pic{
position: relative;
width: 400px;
height: 400px;
background-color:red;
margin:100px auto;
background:url('image/1.jpg') no-repeat center;
}
#pic img{
width: 400px;
height: 400px;
}
#pic ul{
width: 50px;
position: absolute;
top: 0;
right: -70px;
}
li{
width: 40px;
height: 40px;
margin-bottom:10px;
background-color: pink;
float: left;
}
#pic span{
position: absolute;
bottom: 10px;
left: 0;
}
#pic p,#pic span{
width: 400px;
height: 20px;
}
#pic p{
position: absolute;
top: 10px;
left: 0;
}
.active{
background-color: red;
}
/style
body
div id="pic"
img src="" alt=""
pqwrwe/p
spanwerwer/span
ul
/ul
/div
script
window.onload=function(){
//存放旧li
var oldLi=null;
var num=0;
var oPic = document.getElementById('pic');
var oImg = oPic.getElementsByTagName('img')[0];
var oUL =? oPic.getElementsByTagName('ul')[0];
var oSpan= oPic.getElementsByTagName('span')[0];
var oP = oPic.getElementsByTagName('p')[0];
var oLi= oUL.getElementsByTagName('li');
var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];
var aText = ['图片1','图片2','图片3','图片4'];
for(var i=0;iarr.length;i++){
//动态添加元素
oUL.innerHTML+='li/li';
}
// 旧li就等于当前的
oldLi=oLi[num];
// 初始化
oImg.src=arr[num];
oP.innerHTML=num+1+'/'+arr.length;
oSpan.innerHTML=aText[num];
oLi[num].className='active';
for(var i=0;iarr.length;i++){
// 给元素自定义属性
//
oLi[i].index=i;
oLi[i].onclick=function(){
// 当元素被点击时图片文字信息都一起变化
oImg.src=arr[this.index];
oP.innerHTML=1+this.index+'/'+arr.length;
oSpan.innerHTML=aText[this.index];
// 清空上一个 当前添加
oldLi.className='';
//将上一个给当前
oldLi=this;
this.className='active';
}
}
}
/script
/body
/html
扩展资料：
注意事项
1、可以通过JS删除和添加hidden属性，改用style.display="none"和style.display="inline"来实现隐藏和显示。
2、button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置button相关的值。
border:none; 设置按钮无边框
outline:none;消除按钮点击后出现的表示被点击的边框
background：url(...)按钮背景图片
text-shadow: 0 1px 1px rgba(0,0,0,.3);文字阴影
box-shadow: 0 5px 7px rgba(0,0,0,.2);按钮阴影
border-radius:15px;按钮边框圆角
如何通过js点击两张图片来回切换
首先
if (oImg.src="img/1.png")
是赋值而不是判断相等, 判断相等请用==或者===
其次, 你的切换不应当依赖於从元素上读到的src, 而应当用变量维护当前的状态
示例
window.onload?=?function()
{
var
oImg?=?document.getElementById('img1'),
Picture?=?['img/1.png','img/2.png'],
Index?=?0;
oImg.onclick?=?function()
{
++Index
Index??Picture.length?||?(Index?=?0)
oImg.src?=?Picture[Index]
}
}
如何用javascript实现三张以上的图片在点击图片时切换到下一张，我是初学者，希望用数组和循环实现求代码
script type="text/javascript"
window.onload = function() {
????// 图片地址数组
????var image_urls = ["first.jpg", "second.jpg", "third.jpg", "fourth.jpg"];
????// 初始化数组键值 (0 = 第一个图片)
????var idx = 0;
??????????????????????????????????????????????????????????????????????????
????// 点击 id 为 img 的图片
????document.getElementById("img").onclick = function() {
????????// idx + 1，如果为最后一张，还原回第一张
????????idx = idx === image_urls.length - 1 ? 0 : idx + 1;
????????// 设置 src
????????this.src = image_urls[idx];
????????// 测试
????????alert(this.src);
????};
};
/script
img id="img" src="first.jpg" /
上面代码只用了一个 img，点击更换地址。
还是你想全部隐藏（除当前图片），点击后显示下一张？
js鼠标单击实现图片切换？
1、提前准备一组图片，将图片名称设置一定规律：例如 ?img1.jpg、img2.jpg
2、编写鼠标点击事件
3、在鼠标点击时间里，判断鼠标点击次数
4、根据不同次数，显示不同的图片
script?type="text/javascript"
????$(function(){
????????var?items=new?Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");
????????var?i=0;
????????$("#bgImage").click(function(){
????????????i++;
????????????if(iitems.length){
????????????????i=1;
????????????}
????????????$(this).prop("src","img"+i+".jpg");
????????});
????});
/script