如何实现点击后在网页中换图片

chen327684096 2012-10-27 06:09:07

有两个栏目,分别是类别和此类别下的具体图片,如何点击某一个类后图片换成此类别的图？

摄影动漫
摄影图A 摄影图B 摄影图C 摄影图D

↓点击动漫后
↓
↓
↓
摄影动漫
动漫图A 动漫图B 动漫图C 动漫图D

...全文

398 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

oJianDan12 2012-10-29

打赏
举报

<html>
<head>
<style>
.caocao{
-moz-transForm: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
<script type="text/javascript" src="./jquery-1.8.0.js"></script>
<script>
var moveLengthLeft = 0;
var moveLengthTop = 0;

var actionST = 0;

var timeInterval = 150;

var pic = 0;

function action()
{
var pic1 = "./pic2.png";
var pic2 = "./pic3.png";
var pic3 = "./pic1.png";
var actionArray = [pic1, pic2, pic3];

var doc = document.getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0;
}else{
pic += 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray[pic];
}

function walk()
{
setInterval(action, timeInterval);

for(var i = 0; i < 100; i++){
$("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback。callback里可以放函数。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft += 2;
moveLengthTop += 1;
}
}

function standCaocao()
{
pic = 2;
}
</script>
</head>
<body onLoad="walk()">
<div style="border:10px solid green; width:250px; height:200px; background-color:lightblue;">
<img src="./pic1.png" id="ID_IMG_CAOCAO" style="margin-top:0px; margin-left:10px" class="caocao"/>
</div>
</body>
</html>

a547428081 2012-10-29

打赏
举报

[Quote=引用 4 楼的回复:]

引用 3 楼的回复:

A.把图片存在不同的JS数组中.点击不同类别,就循环不同数组来批量更换图片.
B.用AJAX即时取不同类别的图片.这样可以取到刚更新过的最新结果.

[/Quote]
源码可以看一下吗

chen327684096 2012-10-28

打赏
举报

[Quote=引用 3 楼的回复:]

A.把图片存在不同的JS数组中.点击不同类别,就循环不同数组来批量更换图片.
B.用AJAX即时取不同类别的图片.这样可以取到刚更新过的最新结果.
[/Quote]

有相应源码吗?

碧海情天-赵亮 2012-10-27

打赏
举报

A.把图片存在不同的JS数组中.点击不同类别,就循环不同数组来批量更换图片.
B.用AJAX即时取不同类别的图片.这样可以取到刚更新过的最新结果.

chen327684096 2012-10-27

打赏
举报

在看jquery的时候发现使用$("img.fisrt").attr("src","路径"),可以一张图一张图的改变
有更方便的方法吗,比如一次改变N张图？

chen327684096 2012-10-27

打赏
举报

补充一下,类似百度图片那样的换图就行,不过我是需要换一片图片
http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%BA%A3%D4%F4%CD%F5&in=23181%20%20%20%20%20&cl=2&lm=-1&st=-1&pn=3&rn=1&di=47022459150&ln=1982&fr=&fm=index&fmq=1351332085422_R&ic=&s=&se=&sme=0&tab=&width=&height=&face=&is=&istype=2#pn8&-1&di266956029200&objURLhttp%3A%2F%2Fimg.kumi.cn%2Fphoto%2Fc8%2F3c%2F23%2Fc83c23169e5bdc86.jpg&fromURLhttp%3A%2F%2Ftu.kumi.cn%2Fk%2F123-39162-1-435.html&W1024&H768&T7589&S154&TPjpg