js点击两张图片切换(js点击图片切换另一张图)
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实现一个页面可以用键盘左右方向键控制两张图片切换
用js的 event.keyCode来获取方向键。
从网上你可以查到左右方向键对应的keyCode值，这样你就能获取到左右键点击事件了。
然后当左右键点击的时候，触发显示和隐藏对应图片的功能。
图片的显示和隐藏，你可以用js给对应的图片添加显示或者隐藏的css。
这样就能实现你要的效果了
求一段点击按钮两张图片互换的js
!DOCTYPE?html
html?lang="en"
head
meta?charset="UTF-8"
title/title
/head
body
script
function?change_pic(){
???var?img1=document.getElementById('img1');?
???var?img2=document.getElementById('img2');
???temp?=?img1.src;
???img1.src?=?img2.src;
???img2.src?=?temp;
??}
/script
input?type="button"?name="but2"?value="切换图片"?onclick="change_pic()"
img?id="img1"?src="C:\Users\Administrator\Desktop\1.jpg"?alt=""?/
img?id="img2"?src="C:\Users\Administrator\Desktop\2.jpg"?alt=""?/
/body
/html
我在桌面上放了两张图片，你也可以试试
如何通过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]
}
}