java图片特效轮播代码_JQuery实现图片轮播效果

【实例演示】

1

2

3

4

  

  

  

  

用JQuery操作DOM确实很方便，并且JQuery提供了非常人性化的API应付我们的各种需求，其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色。大大简化了js的代码。

【原理简述】

这里大概说一下整个流程：

1，将除了第一张以外的图片全部隐藏，

2，获取第一张图片的alt信息显示在信息栏，并添加点击事件

3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片

4，设置setInterval，定时执行切换函数

【代码说明】

filter(":visible") :获取所有可见的元素

unbind()：从匹配的元素中删除绑定的事件

siblings：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

例：找到每个div的所有同辈元素中带有类名为selected的元素。

<

p

>

Hello

p

><

div

><

span

>

Hello Again

span

>

div

><

p

>

And Again

p

>

执行 $("div").siblings()，结果

[

<

p

>

Hello

p

>

,

<

p

>

And Again

p

>

]

【程序源码】

HTML部分：

<

body

>

<

div

id

="banner"

>

<

div

id

="banner_bg"

>

div

>

<

div

id

="banner_info"

>

div

>

<

ul

>

<

li

class

="on"

>

1

li

>

<

li

>

2

li

>

<

li

>

3

li

>

<

li

>

4

li

>

ul

>

<

div

id

="banner_list"

>

<

a

href

="#"

target

="_blank"

><

img

src

="imgs/p1.jpg"

title

="橡树小屋的blog"

alt

="橡树小屋的blog"

/>

a

>

<

a

href

="#"

target

="_blank"

><

img

src

="imgs/p5.jpg"

title

="橡树小屋的blog"

alt

="橡树小屋的blog"

/>

a

>

<

a

href

="#"

target

="_blank"

><

img

src

="imgs/p3.jpg"

title

="橡树小屋的blog"

alt

="橡树小屋的blog"

/>

a

>

<

a

href

="#"

target

="_blank"

><

img

src

="imgs/p4.jpg"

title

="橡树小屋的blog"

alt

="橡树小屋的blog"

/>

a

>

div

>

div

>

body

>

CSS部分：

#banner

{

position

:

relative

;

width

:

478px

;

height

:

286px

;

border

:

1px solid #666

;

overflow

:

hidden

;

}

#banner_list img

{

border

:

0px

;

}

#banner_bg

{

position

:

absolute

;

bottom

:

0

;

background-color

:

#000

;

height

:

30px

;

filter

:

Alpha(Opacity=30)

;

opacity

:

0.3

;

z-index

:

1000

;

cursor

:

pointer

;

width

:

478px

;

}

#banner_info

{

position

:

absolute

;

bottom

:

0

;

left

:

5px

;

height

:

22px

;

color

:

#fff

;

z-index

:

1001

;

cursor

:

pointer

}

#banner_text

{

position

:

absolute

;

width

:

120px

;

z-index

:

1002

;

right

:

3px

;

bottom

:

3px

;

}

#banner ul

{

position

:

absolute

;

list-style-type

:

none

;

filter

:

Alpha(Opacity=80)

;

opacity

:

0.8

;

border

:

1px solid #fff

;

z-index

:

1002

;

margin

:

0

;

padding

:

0

;

bottom

:

3px

;

right

:

5px

;

}

#banner ul li

{

padding

:

0px 8px

;

float

:

left

;

display

:

block

;

color

:

#FFF

;

border

:

#e5eaff 1px solid

;

background

:

#6f4f67

;

cursor

:

pointer

}

#banner ul li.on

{

background

:

#900

}

#banner_list a

{

position

:

absolute

;

}

JS部分:

<

script type

=

"

text/javascript

"

>

var

t

=

n

=

0

, count;

$(document).ready(

function

(){

count

=

$(

"

#banner_list a

"

).length;

$(

"

#banner_list a:not(:first-child)

"

).hide();

$(

"

#banner_info

"

).html($(

"

#banner_list a:first-child

"

).find(

"

img

"

).attr(

"

alt

"

));

$(

"

#banner_info

"

).click(

function

(){window.open($(

"

#banner_list a:first-child

"

).attr(

"

href

"

),

"

_blank

"

)});

$(

"

#banner li

"

).click(

function

() {

var

i

=

$(

this

).text()

-

1

;

//

获取Li元素内的值，即1，2，3，4

n

=

i;

if

(i

>=

count)

return

;

$(

"

#banner_info

"

).html($(

"

#banner_list a

"

).eq(i).find(

"

img

"

).attr(

"

alt

"

));

$(

"

#banner_info

"

).unbind().click(

function

(){window.open($(

"

#banner_list a

"

).eq(i).attr(

"

href

"

),

"

_blank

"

)})

$(

"

#banner_list a

"

).filter(

"

:visible

"

).fadeOut(

500

).parent().children().eq(i).fadeIn(

1000

);

document.getElementById(

"

banner

"

).style.background

=

""

;

$(

this

).toggleClass(

"

on

"

);

$(

this

).siblings().removeAttr(

"

class

"

);

});

t

=

setInterval(

"

showAuto()

"

,

4000

);

$(

"

#banner

"

).hover(

function

(){clearInterval(t)},

function

(){t

=

setInterval(

"

showAuto()

"

,

4000

);});

})

function

showAuto()

{

n

=

n

>=

(count

-

1

)

?

0

:

++

n;

$(

"

#banner li

"

).eq(n).trigger(

"

click

"

);

}

<

/

script>

附件：源码下载

《JQuery实现图片轮播效果》

BY

橡树小屋 from

http://www.cnblogs.com/babyzone2004/

本文地址：

http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html

万和城