登录注册

jQuery图片轮播加悬停效果

插件特效
2026-07-26 05:29 3 次浏览 • 0 次下载 354.2KB
jQuery图片轮播加悬停效果

=======以下内容由会员 只看不发了 提供============

使用方法

1.将文档内内部样式表保存到目录css下的style.css文件中，并在页面中链接到这个样式表文件

?
1
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

2.添加jquery.SuperSlide2.js

<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>

3.添加图片效果js（可根据实际情况整理到外部js文件中）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready(function () {
/* 图片滚动效果 */
$(".mr_frbox").slide({
titCell: "",
mainCell: ".mr_frUl ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 4
});
/* 鼠标悬停图片效果 */
$(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());
$("li").mouseout(function (e) {
if ((e.pageX < $(this).offset().left || e.pageX > ($(this).offset().left + $(this).width())) || (e.pageY < $(this).offset().top || e.pageY > ($(this).offset().top + $(this).height()))) {
$(this).find('.mr_zhe_i').show();
$(this).find('.mr_zhe_hover').hide().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
return false;
}
});
$('.mr_zhe').mouseover(function (event) {
$(this).find('.mr_zhe_i').hide();
$(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
return false;
});
});

4.html部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<div class="friend">
<div class="mr_frbox">
<img class="mr_frBtnL prev" src="images/mfrl.gif" />
<div class="mr_frUl">
<ul id="mr_fu">
<li><a href="http://www.jq22.com/">
<img src="images/i.jpg" />
</a>
<div class="mr_zhe">
<div class="mr_zhe_i">
<h1>
I</h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
<div class="mr_zhe_hover">
<h1>
<img src="images/plus.gif"></h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
</div>
</li>
<li><a href="http://www.jq22.com/">
<img src="images/i2.jpg" />
</a>
<div class="mr_zhe">
<div class="mr_zhe_i">
<h1>
E</h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
<div class="mr_zhe_hover">
<h1>
<img src="images/plus.gif"></h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
</div>
</li>
<li><a href="http://www.jq22.com/">
<img src="images/i3.jpg" />
</a>
<div class="mr_zhe">
<div class="mr_zhe_i">
<h1>
S</h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
<div class="mr_zhe_hover">
<h1>
<img src="images/plus.gif"></h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
</div>
</li>
<li><a href="http://www.jq22.com/">
<img src="images/i4.jpg" />
</a>
<div class="mr_zhe">
<div class="mr_zhe_i">
<h1>
A</h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
<div class="mr_zhe_hover">
<h1>
<img src="images/plus.gif"></h1>
<div class="mr_zhe_p">
<h3>
<span>家居软装设计概念</span>Introduction soft home design</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
<img class="mr_frBtnR next" src="images/mfrr.gif" />
</div>
</div>
评论