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>