jQuery 图片切换效果

这几天刚开始学习jQuery,感觉jQuery确实很强大,下了个CHM的手册,看他的筛选器,属性还有各种方法
感觉不难,几天不碰 忘记了,看来还是缺乏练习,还没有真正会用,只是理解怎么回事吧了,所以决定坚持天天练习
自己动手写,
这个是个简单的图片切换,当然只用js也能很好的实现,但是感觉没有jQuery来的快速直接,尤其是他的选择器很方便,
不用在js里面做循环了 呵呵,我做的初衷是实现缩略图单击后图片淡入淡出,但是尝试了很多次没有解决,也不知道问题出在哪里
如果有谁知道,请在评论里面给我指教一下,不 胜感激。

效果图入下
jQuery-images
代码实现部分

1$(document).ready(function(){//这里最好不要用$()取代
2 $(.thumil_img img).hover(
3 function(){$(this).animate({marginRight:20}),slow},
4 function(){$(this).animate({marginRight:0}),slow}
5 )
6 $(.thumil_img li a).click(function(){
7 var img_path=$(this).attr(href);
8 var title=$(this).attr(title);
9 $(#largeImages).attr({src:img_path}) ;
10 $(#largeImages).fadeIn(slow)
11 $(.title).html(title);
12 return false;//一定要有return false,否则会跳转链接到图片
13}
)
14}
);
15
1a {
2 blr:expression(this.onFocus=this.blur())
3}
/*去除a标点击后的签的虚线,在FF浏览器下不起作用,只好又在a标签里面写入了*/
4* {
5 margin:0;
6 padding:0;
7}

8#reimg {
9 margin:0 auto;
10 width:410px;
11 margin-top:200px;
12}

13#largeImages {
14 height:250px;
15 width:400px;
16 display:block;
17 margin-bottom:5px;
18 padding:5px;
19 border:1px #ccc solid;
20}

21.thumil_img {
22 list-style:none;
23 height:20px;
24 margin-bottom:5px;
25 width:200px;
26 display:inline;
27}

28.thumil_img li {
29 float:left;
30 margin-right:5px;
31}

32.thumil_img img {
33 height:20px;
34 padding:2px;
35 border:1px solid #ccc;
36}

37.title {
38 float:right;
39 margin-right:10px;
40 display:block;
41}

42.title p:first-letter {
43 text-transform:uppercase;
44}
1 <div id=”reimg”> <img id=”largeImages” src=”images/1.jpg” />
2 <ul class=”thumil_img”>
3 <li><a href=”images/1.jpg” title=”Apple” onFocus=”this.blur()”><img src=”images/1.jpg” /></a></li>
4 <li><a href=”images/2.jpg” title=”Cool” onFocus=”this.blur()”><img src=”images/2.jpg” /></a></li>
5 <li><a href=”images/3.jpg” title=”Diamond” onFocus=”this.blur()”><img src=”images/3.jpg” /></a></li>
6 <li><a href=”images/4.jpg” title=”Color” onFocus=”this.blur()”><img src=”images/4.jpg” /></a></li>
7 </ul>
8 <span class=”title”>Apple</span>
9 </div>

4 thoughts on “jQuery 图片切换效果

  1. Pingback: hack valorant

  2. Pingback: primobolan dragon pharma

  3. Pingback: www.cialis.com

  4. Pingback: order viagra online

Leave a Reply