手机h5页面，第一次显示的是第一个div的图片，如何写jq使点击这张图片以后切换显示下一张图片？也
手机h5页面，第一次显示的是第一个div的图片，如何写jq使点击这张图片以后切换显示下一张图片？也就是说手机h5，页面是如何切换页面的？求大神解答，感激不尽...
手机h5页面，第一次显示的是第一个div的图片，如何写jq使点击这张图片以后切换显示下一张图片？也就是说手机h5，页面是如何切换页面的？求大神解答，感激不尽
展开
1个回答
展开全部
只能说给你思路了，额
附件是源文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<h1>电脑测试，请参考自行改</h1>
<h3>因为第一次用面向对象写，难免不好的地方,特别是绑定点击事件，头疼了一下午，请自行改正</h3>
<p id="show"></p>
<div id="c">
用于展示图片的div
</div>
<div id="s">
用于展示图片的另一个div
</div>
<script>
//创建构造方法 1.对象（String） 2.src地址（Array）图片大小要一致，否则图片会按后门3、4参数所设置的显示 3.显示宽度 4.显示高度
function obj(obj,srcArr,width,height){
window.obj.number++;//总obj数量+1；
window.obj.obj.push(this);//将当前对象压入obj.obj
this.id=window.obj.number-1;//定义一个标识身份id，从0起头方便索引
this.obj=obj;//当前对象的字符串
this.index=0;//图片位置索引初始化为0
this.srcArr=srcArr;//当前对象的图片地址数组
this.width=width;//设定起始宽度
this.height=height;//设定起始高度
//绑定点击事件
eval('$("'+this.obj+'").click(function(){window.obj.obj['+this.id+'].next.call(window.obj.obj['+this.id+']);});');
}
obj.number=0;obj.obj=Array();//初始化obj数量为0，初始化obj.obj为数组
obj.prototype.next=function(){//给obj添加一个next方法
if(this.index == this.srcArr.length){//索引是否等于图片数组数量，因为索引是从0开始，而数量是从1开始的
this.index=0;//相等表示到了末尾，给他重新归零
}
$(this.obj).css({'width':'0px','height':'0px'});//设置起始宽高
var bg='url('+this.srcArr[this.index]+')';//局部变量 储存url信息
$(this.obj).css({'background':bg});//改变背景
$(this.obj).animate({'width':this.width,'height':this.height});//动画至目标宽高
this.index++;//图片索引地址增加，指向下一个图片位置
}
//使用部分
$(document).ready(function(){//jQuery文档加载完成后开始执行的代码
var arr=['F:/桌面背景/图片/219861.jpg','F:/桌面背景/图片/225987.jpg'];//创建图片地址数组
var obj1=new obj("#c",arr,1440,1280);//创建一个obj
obj1.next();//因为刚开始没有图片，于是调用一下next方法刷出一张
//在创建一个obj测试是不是能够同时创建多个对象
var obj2=new obj("#s",arr,1440,1280);
obj2.next();
$('#show').html('当前一共有'+obj.number+"个对象");//看看有多少个对象
});
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
