本文目录
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(i》items.length){ i=1; } $(this).prop(“src“,“img“+i+“.jpg“); }); });《/script》JS图片切换带有数字 要JS
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》《html xmlns=“http://www.w3.org/1999/xhtml“》《head》《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》《title》图片切换练习《/title》 《style type=“text/css“》 a{ cursor:pointer; } 《/style》《div id=“userID“》《script type=“text/javascript“》 var img1=“《img src=’images/1.jpg’ /》“; var img2=“《img src=’images/2.jpg’ /》“; var img3=“《img src=’images/3.jpg’ /》“; var img4=“《img src=’images/4.jpg’ /》“; var arrays=; }《/script》《div style=“position:absolute;top:220px;left:180px“》《a onclick=“out(0)“》 一 《/a》《a onclick=“out(1)“》 二 《/a》《a onclick=“out(2)“》 三 《/a》《a onclick=“out(3)“》 四 《/a》《/div》《div id=“imgId“》“《img src=’images/1.jpg’ /》《/div》《/body》《/html》
JavaScript中输入数字转换图片（代码如下）
首先，changdu这个变量没有传递好，导致循环没有正常运行，实际中就执行了一遍而已。其次，就算循环正常了，你的每次循环，都把sresult这个变量给清空一次。所以你不能得到想要的结果。还有，你写代码，不太规范啊，而且js有时不写结束符分号，这个也不是好习惯啊。下面是参考代码：《input type=“text“ id=“ShuRuNum“ /》《button onclick=“Chenge();“》转换《/button》《br /》《br /》《span id=“ShuChuPic“》《/span》《script language=“javascript“》 function Chenge(){ var shuzi=ShuRuNum.value; var changdu=shuzi.length -1; var sresult=““; //alert(changdu); for(i=0;i《=changdu;i++) { var inum; inum=parseInt(ShuRuNum.value.charAt(i)); sresult=sresult+“《img src=./pic“+inum+“.jpg /》“; ShuChuPic.innerHTML=sresult; //alert(ShuRuNum.value); }}《/script》
在js单击不同的数字链接显示不同的图片
可以写入超链接。JS实现图片切换和数字随图片变换添加6个圆形数字超链接,鼠标移动到数字区域,切换到数字对应的图片。超链接-当前表单对象对报表块和图表和js代码不同,根据需要使用对应的代码即可。
JS实现点击一个按钮更换图片
你的代码差在少了“选择元素“这一步。
img1.src = “..\images/DT2.JPG“这一步是没有作用的，因为img1你还没有定义。
正确的方法是让图片元素的id是img1，然后
document.getElementById(’img1’).src = “..\images/DT2.JPG“
这样进行赋值。
document.getElementById(’img1’)这一步的作用就是选择图片元素。
这是针对此问题的测试页面
代码如下
《div class=“DT“》
《div》
《img id=“img1“ src=“https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg“
/》
《/div》
《/div》
《div style=“text-align:center“》
《input type=“button“ id=“b1“ value=“ 放大 “ onclick=“fd();“ /》
《input type=“button“ id=“b3“ value=“还原 “ onclick=“hy();“ /》
《input type=“button“ id=“b2“ value=“ 缩小 “ onclick=“sx();“ /》
《/div》
function fd() {
document.getElementById(’img1’).src = “https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg“
}
function sx() {
document.getElementById(’img1’).src = “https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg“
}
function hy() {
document.getElementById(’img1’).src = “https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg“
}
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=““》
《p》qwrwe《/p》
《span》werwer《/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’);
var oUL = oPic.getElementsByTagName(’ul’);
var oSpan= oPic.getElementsByTagName(’span’);
var oP = oPic.getElementsByTagName(’p’);
var oLi= oUL.getElementsByTagName(’li’);
var arr=;
var aText = ;
for(var i=0;i《arr.length;i++){
//动态添加元素
oUL.innerHTML+=’《li》《/li》’;
}
// 旧li就等于当前的
oldLi=oLi;
// 初始化
oImg.src=arr;
oP.innerHTML=num+1+’/’+arr.length;
oSpan.innerHTML=aText;
oLi.className=’active’;
for(var i=0;i《arr.length;i++){
// 给元素自定义属性
//
oLi.index=i;
oLi.onclick=function(){
// 当元素被点击时图片文字信息都一起变化
oImg.src=arr;
oP.innerHTML=1+this.index+’/’+arr.length;
oSpan.innerHTML=aText;
// 清空上一个 当前添加
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;按钮边框圆角
