Jquery1.7.1----2.轮换图片展览

其实我们要做的一件事情就是类似相册的展览这样的功能。所以我们需要有图片（图片可以在演示网址进行下载，这个就不用me 多说了）；其次要将我们的图片引入到网页中，用<img />标签，我们希望在每个图片中能够有类似相框的东西给圈起来，所以我们需要加入css代码；最后我们希望相片能够进行轮换，所以我们需要加入js代码进行事件的控制。

这个功能用纯js代码也是可以实现的，也是简单之极，当然我们现在是想提高我们jquery水平，所以我们还是用jquery来做。

2.3 问题的假设

假设条件无：

2.4 问题的求解

一般页面编写的顺序都是 html代码，css代码，js代码(css,js之间不是一定的)，当然习惯问题。

① 页面代码

页面代码主要是显示大图已经大图对应的缩略图，当然一开始只能显示一张大图了，源码如下：

</p>

② csss 代码

在浏览器浏览下我们的作品，你会发现长的不是那么好看(虽然原本就不好看，呵呵，大家别太大声呀，自得其乐就可以了呀)，所以我们希望美化下。我们知道美眉一般出门吧，都喜欢在脸上擦点粉粉(至于具体的擦什么，就不得而知了，呵呵，本人可没有那个嗜好呀，别想歪了)，然后在外面套上漂亮的衣裳（当然不能光溜溜的就出去了，害羞吗，呵呵，开个玩笑。在此说明下：没有像拿谁开玩笑，本意是想让大家在开心中进行成长，如有侵犯谁的利益了，联系我，一定道歉，并且修改文章），出门去被人欣赏去，回头率高达百分百（哇塞，刚才那个美眉就好漂亮啊，在回头看一眼，啧啧，不错不错。啊，好疼呀，撞电线杆上了，还有狗狗的尿呀，恶心死了，赶快用手擦擦闪人）。

美眉喜欢漂亮，图片当然也希望让自己更吸引人了，所以我们要给图片加上边框，至于具体怎么一个设计法，那就看大家的本领了。我设计的就勉强能让小猫小狗看看，见人就难了。

具体源码如下：

<style>

body{

text-align:center;/*居中内容*/

}

/* 给大图加上边框，宽和高度内边距*/

img#largeImg{

border: solid 1px #ccc;

width: 550px;

height: 400px;

padding: 5px;

}

/* 给 img 加上边框，宽和高度内边距*/

p.show img {

border: solid 1px #ccc;

width: 100px;

height: 100px;

padding: 4px;

}

</style>

③ js代码

当然同样同样需要引入jquery.js 库。

具体的js代码如下：

$(document).ready(function(){

$("p.show a").click(function(){

var largeImage = ($(this).attr("href"));//获得当前对象href属性的值

$("img#largeImg").attr({src:largeImage});

return false;// 这句代码一定要加上，不然点击超链接就会进行跳转了。

});

</script>

说明：

》在这个例子用了 jquery 获取属性的值：

($(this).attr("href"));//获得当前对象href属性的值

和绑定属性的值：

$("img#largeImg").attr({src:largeImage});

》代码解说：

return false;// 这句代码一定要加上，不然点击超链接就会进行跳转了。

为什么这个程序需要加上这个语句呢，主要是为了防止超链接进行跳转。什么意思呢？别着急，请听我慢慢说来。

假设有代码：

这是一个带有图片的超链接，当点击超链接时，会触发onClick()事件，也就是我们写的那个代码里。当程序得到onclick()方法的返回值为false的时候，就不能进行跳转了。所以一般我们不进行设置返回值得话都是默认返回true的，也就能够进行跳转了。

》所有源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>轮换图片展览</title>

$(document).ready(function(){

$("p.show a").click(function(){

var largeImage = ($(this).attr("href"));//获得当前对象href属性的值

$("img#largeImg").attr({src:largeImage});

return false;// 这句代码一定要加上，不然点击超链接就会进行跳转了。

});

</script>

<style>

body{

text-align:center;/*居中内容*/

}

/* 给大图加上边框，宽和高度内边距*/

img#largeImg{

border: solid 1px #ccc;

width: 550px;

height: 400px;

padding: 5px;

}

/* 给 img 加上边框，宽和高度内边距*/

p.show img {

border: solid 1px #ccc;

width: 100px;

height: 100px;

padding: 4px;

}

</style>

</head>

<body>

</p>

</body>

</html>

回家吃饭，跟老婆聊聊天去了。你们在学习中也别忘了享受呀。

得得达达，我闪了.

轮换图片展览.zip (337.6 KB)
下载次数: 11

分享到：

jquery-1.7.1 ---3. 模仿WordPress后台评 ... | jquery-1.7.1实例教程-------1. 个性化不同 ...

2012-01-03 12:06
浏览 2702
评论(0)
分类:开源软件
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论