首页 新闻 会员 周边 捐助

JS的图片切换

0
悬赏园豆:15 [已解决问题] 解决于 2017-04-26 11:26

7张图片,怎样让图片点击的时候换其他图片,再点击别的图片时,原来的图片还原。(一共有14张图片,两张一组)谢谢大神~

Chitty的主页 Chitty | 初学一级 | 园豆:143
提问于:2017-04-26 09:18
< >
分享
最佳答案
1

$(".xx").on("click",function(){
$(this).addClass("png1").siblings().removeClass("png2");
})

把class里面写入需要的图片路径就行。

收获园豆:12
永往 | 菜鸟二级 |园豆:214 | 2017-04-26 09:51

 没有用哎~~~是因为有其他的js冲突了么?

Chitty | 园豆:143 (初学一级) | 2017-04-26 10:10

@永往: 引了

Chitty | 园豆:143 (初学一级) | 2017-04-26 10:14

@永往: 

$("#img1").on("click",function(){
$(this).addId("src='images/health/xueya.png'").siblings().removeId("src='images/health/xueya1.png'");
});

Chitty | 园豆:143 (初学一级) | 2017-04-26 10:16

@永往: 我这样用对不对

Chitty | 园豆:143 (初学一级) | 2017-04-26 10:17

@Chitty: addid???

用addclass啊,在css里面写这个class,class里面是你需要的src

永往 | 园豆:214 (菜鸟二级) | 2017-04-26 10:20

@Chitty: 或者你要是不会用了,就两个图片都写上,像选项卡一样,一个显示的时候一个隐藏

永往 | 园豆:214 (菜鸟二级) | 2017-04-26 10:21

@Chitty: https://zhidao.baidu.com/question/282353549.html

和这个一样。。。你看看

永往 | 园豆:214 (菜鸟二级) | 2017-04-26 10:26

@永往: 

<div class="ndaohang-content">
<ul class="daohangul" >
<li class="ndaohangli"><a href="#blood_pressure"><img id="img1" src="images/health/xueya.png"></a></li>
<li class="ndaohangli"><a href="#blood_oxygen"><img id="img2" src="images/health/xueyang.png" ></a></li>
<li class="ndaohangli"><a href="#eeg" > <img id="img3" src="images/health/xindiantu.png" ></a></li>
<li class="ndaohangli"><a href="#heartrate" ><img id="img4" src="images/health/xinlv.png" ></a></li>
<li class="ndaohangli"><a href="#temperature" ><img id="img5" src="images/health/tiwen.png"></a></li>
<li class="ndaohangli"><a href="#blood_glucose" ><img id="img6" src="images/health/xuetang.png"></a></li>
<li class="ndaohangli"><a href="#steps" ><img id="img7" src="images/health/bushu.png"></a></li>
</ul>
</div>

 

我页面是这么写的

Chitty | 园豆:143 (初学一级) | 2017-04-26 10:26

@Chitty: https://zhidao.baidu.com/question/551521248.html

永往 | 园豆:214 (菜鸟二级) | 2017-04-26 10:28

@Chitty: 额。。。。href里面写的?额。

<li class="ndaohangli"><a href="JavaScript:;void(0)" ><img id="img7" src="images/health/bushu.png" onClick="change_pic()"></a></li>

<script>

function change_pic(){
var imgObj = document.getElementById("img7");
if(imgObj.getAttribute("src",2)=="images/tu1.png"){
imgObj.src="images/tu2.png";
}else{
imgObj.src="images/tu1.png";
}
}
</script>

图片路径自己看着改吧

永往 | 园豆:214 (菜鸟二级) | 2017-04-26 10:34

@永往: 呃,就是图片1,2,,3,4,5,6,7,  1(1),2(1),3(1),4(1),5(1),6(1),7(1) 。

我点1,换1(1),点2的时候,第一次的图片还原为1,第二次点的变为2(1)......以此类推~

Chitty | 园豆:143 (初学一级) | 2017-04-26 10:50

@Chitty: 

var $img=$('.aa img');

var num=1;

var pngurl = 'images/'+num+'.png';

var pngurl2 = 'images/'+num-1+'.png';

num++;

$img.on('click',function(){

$img.eq($(this).index()-1).attr({'src':pngurl2})

this.src=pngurl;

})

我想的大致思路就是这,你看着调调

永往 | 园豆:214 (菜鸟二级) | 2017-04-26 11:05

@永往: 啊,虽然我没有调好,但是还是谢谢啦~

Chitty | 园豆:143 (初学一级) | 2017-04-26 11:23
其他回答(1)
0

用这个试一下 http://www.webdevelopers.eu/shop/5/demo

下载地址 http://www.webdevelopers.eu/packages/wds/download.php?iid=5&license=3

收获园豆:3
狼爷 | 园豆:1204 (小虾三级) | 2017-04-26 09:43

 下载不下来呀~

支持(0) 反对(0) Chitty | 园豆:143 (初学一级) | 2017-04-26 10:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册