Web图片轮流显示
引言:
图片交替显示 (有文字说明)
我们经常看到有的网站上 图片以幻灯片的方式 交替显示 我说的就是这个效果
下面写一下步骤: 我自己整理一下思路 也帮助需要的人
原理:使用jQuery 做到的
第1步 建立jquery文件 (jQuery.js)
这个文件的内容 我就不贴在这里了(自行从网上下载)
第2步 Slideshow.js
JQuery代码
var $$
=
$.fn;
$$.extend({
SplitID : function()
{
return
this
.attr(
'
id
'
).split(
'
-
'
).pop();
},
Slideshow : {
Ready : function()
{
$(
'
div.tmpSlideshowControl
'
)
.hover(
function() {
$(
this
).addClass(
'
tmpSlideshowControlOn
'
);
},
function() {
$(
this
).removeClass(
'
tmpSlideshowControlOn
'
);
}
)
.click(
function() {
$$.Slideshow.Interrupted
=
true
;
$(
'
div.tmpSlide
'
).hide();
$(
'
div.tmpSlideshowControl
'
).removeClass(
'
tmpSlideshowControlActive
'
);
$(
'
div#tmpSlide-
'
+
$(
this
).SplitID()).show()
$(
this
).addClass(
'
tmpSlideshowControlActive
'
);
}
);
this
.Counter
=
1
;
this
.Interrupted
=
false
;
this
.Transition();
},
Transition : function()
{
if
(
this
.Interrupted) {
return
;
}
this
.Last
=
this
.Counter
-
1
;
if
(
this
.Last
<
1
) {
this
.Last
=
3
;
}
$(
'
div#tmpSlide-
'
+
this
.Last).fadeOut(
'
slow
'
,
function() {
$(
'
div#tmpSlideshowControl-
'
+
$$.Slideshow.Last).removeClass(
'
tmpSlideshowControlActive
'
);
$(
'
div#tmpSlideshowControl-
'
+
$$.Slideshow.Counter).addClass(
'
tmpSlideshowControlActive
'
);
$(
'
div#tmpSlide-
'
+
$$.Slideshow.Counter).fadeIn(
'
slow
'
);
$$.Slideshow.Counter
++
;
if
($$.Slideshow.Counter
>
3
) {
$$.Slideshow.Counter
=
1
;
}
setTimeout(
'
$$.Slideshow.Transition();
'
,
5000
);
}
);
}
}
});
$(document).ready(
function() {
$$.Slideshow.Ready();
}
);
第3步 Slideshow.css
样式表代码
body
{
font-family
:
Arial, sans-serif
;
}
div#tmpSlideshow
{
margin
:
10px
;
padding
:
30px 0 0 0
;
position
:
relative
;
height
:
335px
;
width
:
755px
;
border
:
1px solid rgb(200, 200, 200)
;
}
div.tmpSlide
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
730px
;
height
:
332px
;
display
:
none
;
}
div.tmpSlide img
{
float
:
left
;
margin
:
30px 0 0 15px
;
width
:
527px
;
border
:
1px solid rgb(244, 244, 244)
;
}
div#tmpSlideshowControls
{
position
:
absolute
;
bottom
:
2px
;
left
:
20px
;
width
:
175px
;
}
div.tmpSlideshowControl
{
border
:
1px solid #e1dece
;
float
:
left
;
margin
:
0 5px 0 0
;
background
:
url('Feature.png') no-repeat
;
width
:
38px
;
height
:
36px
;
color
:
#554d31
;
font
:
14px Arial, sans-serif
;
text-align
:
center
;
cursor
:
pointer
;
}
div.tmpSlideshowControl span
{
line-height
:
36px
;
vertical-align
:
middle
;
}
div.tmpSlideshowControlOn
{
background-image
:
url('FeatureOver.png')
;
}
div.tmpSlideshowControlActive
{
border
:
1px solid rgb(161, 155, 137)
;
}
div.tmpSlideCopy
{
position
:
absolute
;
left
:
565px
;
top
:
20px
;
width
:
170px
;
}
div#tmpSlideshow h4
{
color
:
#b90f23
;
text-transform
:
uppercase
;
font
:
14px Arial, sans-serif
;
margin
:
10px 0
;
}
div.tmpSlideCopy p
{
font
:
11px Arial, sans-serif
;
line-height
:
1.75em
;
}
第4步 准备好文中提到的几个图片文件(在Html页面中的)
第5步 index.html
网页前台代码
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
</
p
>
<
html
xmlns
='http://www.w3.org/1999/xhtml'
>
<
head
>
<
meta
http-equiv
='content-type'
content
='text/html;
charset
=utf-8'
/>
<
meta
http-equiv
='content-language'
content
='cn'
/>
<
title
>
jquery 图片切换效果 a Fade Slideshow jQuery 网页设计爱好者www.html.org.cn整理
</
title
>
<
link
rel
='stylesheet'
type
='text/css'
href
='Slideshow.css'
/>
<
script
type
='text/javascript'
src
='jQuery.js'
></
script
>
<
script
type
='text/javascript'
src
='Slideshow.js'
charset
='utf-8'
></
script
>
</
head
>
<
body
>
<
div
id
='tmpSlideshow'
>
<
div
id
='tmpSlide-1'
class
='tmpSlide'
>
<
img
src
='3.jpg'
alt
='Slide'
/>
<
div
class
='tmpSlideCopy'
>
<
p
>
Lorem ipsum dolor
</
p
>
<
p
>
闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老
</
p
>
</
div
>
</
div
>
<
div
id
='tmpSlide-2'
class
='tmpSlide'
>
<
img
src
='4.jpg'
alt
='Slide'
/>
<
div
class
='tmpSlideCopy'
>
<
h4
>
Ut et leo ut quam
</
h4
>
<
p
>
闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老 闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老
</
p
>
</
div
>
</
div
>
<
div
id
='tmpSlide-3'
class
='tmpSlide'
>
<
img
src
='2.jpg'
alt
='Slide'
/>
<
div
class
='tmpSlideCopy'
>
<
h4
>
Sed sapien quam
</
h4
>
<
div
style
="overflow:scroll; height:220px"
>
闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老 闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老 闻中心图片频道，汇集国内、国际、体育、娱乐、论坛贴图等各频道精
彩图片，以及纪实、风光、搞笑、火辣、性感、动物和老
</
div
>
</
div
>
</
div
>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
div
id
='tmpSlideshowControls'
style
="float:left"
>
<
div
class
='tmpSlideshowControl'
id
='tmpSlideshowControl-1'
><
span
>
1
</
span
></
div
>
<
div
class
='tmpSlideshowControl'
id
='tmpSlideshowControl-2'
><
span
>
2
</
span
></
div
>
<
div
class
='tmpSlideshowControl'
id
='tmpSlideshowControl-3'
><
span
>
3
</
span
></
div
>
</
div
>
</
div
>
<
br
/>
</
body
>
</
html
>
最后 如果想将这个效果显示在其他页面的某个地方 则使用iFrame
<iframe src="photoShow.aspx" width="100%" height = "370" frameborder="no" scrolling="no" id="Iframe2"
runat="server" ></iframe>